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

    }

  • 相关文章
    |
    1天前
    |
    JavaScript 网络架构
    |
    1天前
    |
    人工智能 JavaScript 索引
    Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
    这篇文章讨论了在Vue中进行列表渲染时遇到的“Duplicate keys detected”错误。这个错误通常发生在使用 `v-for` 指令渲染列表时,如果没有为每个循环项指定一个唯一的 `key` 属性,或者指定的 `key` 属性值重复了。文章提供了导致错误的原始代码示例,并给出了修正后的代码,通过在 `key` 绑定中加入索引确保 `key` 的唯一性。此外,文章还解释了为什么需要唯一 `key` 以及如何解决这个问题。
    Duplicate keys detected: This may cause an update error.【Vue遍历渲染报错的解决】
    |
    1天前
    |
    缓存 移动开发 JavaScript
    查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
    该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
    查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
    |
    1天前
    |
    JavaScript
    Vue Cli 脚手架安装
    本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
    Vue Cli 脚手架安装
    |
    1天前
    |
    JavaScript
    vue 计算属性,实现复选框的全选和反选 【小案例】
    本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
    vue 计算属性,实现复选框的全选和反选 【小案例】
    |
    1天前
    |
    开发框架 JavaScript 前端开发
    手把手教你剖析vue响应式原理,监听数据不再迷茫
    该文章深入剖析了Vue.js的响应式原理,特别是如何利用`Object.defineProperty()`来实现数据变化的监听,并探讨了其在异步接口数据处理中的应用。
    |
    1天前
    |
    JavaScript
    vue中组件的局部注册和全局注册
    本文介绍了Vue中组件的局部注册和全局注册的方法,并通过示例代码展示了如何在特定组件或整个Vue应用中注册和使用自定义组件。
    |
    3天前
    |
    存储 JavaScript
    vue页面跳转取消上一个页面请求
    本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
    19 2
    |
    2天前
    |
    JavaScript
    Vue使用element中table组件实现单选一行
    如何在Vue中使用Element UI的table组件实现单选一行的功能。
    16 5
    Vue使用element中table组件实现单选一行
    |
    2天前
    |
    JavaScript
    Vue实现按钮级别权限
    文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
    12 4
    Vue实现按钮级别权限