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

    }

  • 相关文章
    |
    6天前
    |
    JavaScript
    vue使用iconfont图标
    vue使用iconfont图标
    51 1
    |
    17天前
    |
    JavaScript 关系型数据库 MySQL
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
    基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
    |
    2月前
    |
    JavaScript API 开发者
    Vue是如何进行组件化的
    Vue是如何进行组件化的
    |
    2月前
    |
    JavaScript 前端开发 开发者
    Vue是如何劫持响应式对象的
    Vue是如何劫持响应式对象的
    35 1
    |
    2月前
    |
    JavaScript 前端开发 API
    介绍一下Vue中的响应式原理
    介绍一下Vue中的响应式原理
    36 1
    |
    2月前
    |
    JavaScript 前端开发 开发者
    Vue是如何进行组件化的
    Vue是如何进行组件化的
    |
    2月前
    |
    存储 JavaScript 前端开发
    介绍一下Vue的核心功能
    介绍一下Vue的核心功能
    |
    JavaScript 测试技术 容器
    Vue2+VueRouter2+webpack 构建项目
    1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
    1066 0
    |
    2月前
    |
    JavaScript 前端开发 开发者
    vue学习第一章
    欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
    48 1
    vue学习第一章
    |
    2月前
    |
    JavaScript 前端开发 索引
    vue学习第三章
    欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
    34 1

    热门文章

    最新文章