程序员必知: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));

    }

  • 相关文章
    |
    17天前
    |
    JavaScript API 开发者
    Vue是如何进行组件化的
    Vue是如何进行组件化的
    |
    19天前
    |
    JavaScript 前端开发 开发者
    vue 数据驱动视图
    总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
    |
    20天前
    |
    JavaScript 前端开发 开发者
    vue学习第一章
    欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
    23 1
    vue学习第一章
    |
    17天前
    |
    JavaScript 前端开发 开发者
    Vue是如何劫持响应式对象的
    Vue是如何劫持响应式对象的
    19 1
    |
    17天前
    |
    JavaScript 前端开发 API
    介绍一下Vue中的响应式原理
    介绍一下Vue中的响应式原理
    26 1
    |
    17天前
    |
    JavaScript 前端开发 开发者
    Vue是如何进行组件化的
    Vue是如何进行组件化的
    |
    17天前
    |
    存储 JavaScript 前端开发
    介绍一下Vue的核心功能
    介绍一下Vue的核心功能
    |
    20天前
    |
    JavaScript 前端开发 索引
    vue学习第三章
    欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
    22 1
    vue学习第三章
    |
    20天前
    |
    缓存 JavaScript 前端开发
    vue学习第四章
    欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
    35 1
    vue学习第四章
    |
    20天前
    |
    JavaScript 前端开发 算法
    vue学习第7章(循环)
    欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
    21 1
    vue学习第7章(循环)