2、其次点击开始,并找到标签设置。
3、最后在界面中找到颜色即可完成vuev-text-field设置标签颜色。
代码思路:遍历出data里面的数据 v-for
给li加点击事件
通过 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>
第一种:
第二种:
根据点击的tab来展示对应的内容,用到了vue的v-show和绑定class。
首先创建一个属性“shouColor” 用来判断显示哪一个tab页。
再为每一个连接注册点击事件:@click="shouColor = 1"分别让shouColor值改变。
最后为tab连接绑定class用来显示点击状态 :class = "{'blue':shouColor === 3}" 如果showDiv=3时就写入样式blue
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)