程序员必知:vue中按钮使用v

简介: 程序员必知:vue中按钮使用v

当前Vue项目需要做一个按钮切换的功能(点击A号button,背景色变化;点击B号button,A号回复原背景色,B变色)

=====》 =====》

实现上述功能,最基础的方法就是,动过获取对应的dom,强制改变背景色:

开发投资

成交均价

销售面积

库存监测

YGDWKGMJ() {

this.$refs.ygdwkgmj.style.backgroundColor = "#3657be";

this.$refs.xkgmj.style.backgroundColor = "#192e5b";

this.$refs.lmdj.style.backgroundColor = "#192e5b";

this.$refs.clzfcjmj.style.backgroundColor = "#192e5b";

},

这种方式,虽然能实现功能,但是代码臃肿,后期维护不便。

===============================================================

还有一种方法就是通过传给 v-bind:class 一个对象,以动态地切换 class

vue官方文档

  • { {list.name}}

    data() {

    return {

    leftPart: 【

    { name: "开发投//代码效果参考:http://www.zidongmutanji.com/bxxx/377162.html

    资" },

    { name: "成交均价" },

    { name: "销售面积" },

    { name: "库存监测" }

    】,

    changeLeftBackground: 0,

    };

    },

    methods: {

    leftChange(index) {

    this.changeLeftBackground = index;

    },

    }

    .liBackground {

    background: -webkit-gradient(linear, 0 0, 0 100%, from(#303fb2), to(#2f70d4));

    }

  • 相关文章
    |
    2月前
    |
    JavaScript
    vue使用iconfont图标
    vue使用iconfont图标
    139 1
    |
    1天前
    |
    监控 JavaScript 前端开发
    ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
    基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
    38 12
    |
    19天前
    |
    JavaScript 安全 API
    iframe嵌入页面实现免登录思路(以vue为例)
    通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
    48 8
    |
    20天前
    |
    存储 设计模式 JavaScript
    Vue 组件化开发:构建高质量应用的核心
    本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
    57 1
    |
    2月前
    |
    JavaScript 关系型数据库 MySQL
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
    基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
    |
    3月前
    |
    JavaScript API 开发者
    Vue是如何进行组件化的
    Vue是如何进行组件化的
    |
    3月前
    |
    JavaScript 前端开发 开发者
    Vue是如何进行组件化的
    Vue是如何进行组件化的
    |
    3月前
    |
    JavaScript 前端开发 开发者
    vue 数据驱动视图
    总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
    108 58
    |
    3月前
    |
    JavaScript 前端开发 开发者
    vue学习第一章
    欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
    64 1
    vue学习第一章
    |
    3月前
    |
    JavaScript 前端开发 索引
    vue学习第三章
    欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
    61 1