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的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生 *** 控各自的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()

  }

效果图：实现每次刷新都是不同的背景颜色

实现步骤：

1.将随机背景颜色的函数创建出来，bc（），同时获取后台数据，数据是存在vuex中，所以使用...mapState的方式获取

2.将color属通过forEach循环添加进后台数据中，等渲染页面的时候使用

3.通过for循环渲染页面，在需要背景颜色的地方用:style的方式实现

---