vue点击按钮改变背景颜色(vue 点击改变字体颜色)

vue点击tab改变背景颜色

代码思路：

遍历出data里面的数据 v-for

给li加点击事件

绑定class样式 怎么控制样式的显示

通过 class的控制 :class={class:index==变量} 下标和class变量是否相等控制true false

template

div id="app"

ul

li v-for='(item,index) in arr' :class='{bg:index==isactive}'

@click='fn(index)'{{item}}/li

/ul

/div

/template

script

export default {

data () { return { data:{ isactive:0, //默认第一个有样式 arr:['健康医疗','生活服务','信息安全','文化娱乐'],

},

}

},

methods: {

fn (index) {

//点击切换 变量的值 赋值为 index

this.isactive=index; console.log(index); } },}/script style scoped lang='less' .bg { color: red; }/style

vue中按钮使用v-bind:class动态切换颜色，两种做法

第一种：

第二种：

根据点击的tab来展示对应的内容，用到了vue的v-show和绑定class。

首先创建一个属性“shouColor” 用来判断显示哪一个tab页。

再为每一个连接注册点击事件：@click="shouColor = 1"分别让shouColor值改变。

最后为tab连接绑定class用来显示点击状态 :class = "{'blue':shouColor === 3}" 如果showDiv=3时就写入样式blue

vue之修改单页面背景颜色

vue的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生操控各自的body节点，因为所有的页面都拥有同一个body。这就难受了，如果希望设置单个页面的背景颜色而又不影响其他页面，那怎么办？

第一种方式（不建议）

beforeCreate() { document.querySelector('body').setAttribute('style','background-color:rgb(245,245,245)')},

beforeDestroy(){ document.querySelector('body').setAttribute('style', "background-color:''")}

第二种

beforeRouteEnter(to, from, next) {

? ? // 添加背景色document.querySelector('body').setAttribute('style', 'background-color:#f9f9f9')

? ? next()

? },

? beforeRouteLeave(to, from, next) {

? ? // 去除背景色document.querySelector('body').setAttribute('style', '')

? ? next()

? }

Vue中如何点击变大按钮将div变大,反之变小,并改变背景色(运用事件和绑定指令)？

修改颜色相关的不知道是特定颜色变化还是随机，所以没加上。

思路可以是在data中加入变量bgColor，字符串型，或是bgColorRed、bgColorBlud、bgColorGreen 三个整形，走十六进制颜色编码或是RGB色码都可以。

然后在点击时特定的处理这些变量

在:style中多加一条

'backgroundColor:'+bgColor

或者

'backgroundColor:rgb('+bgColorRed+','+bgColorGreen+','+bgColorBlue+')'