vuev-text-field设置标签颜色

vuev-text-field设置标签颜色,第1张

1、首先打开vuev-text-field。

2、其次点击开始,并找到标签设置。

3、最后在界面中找到颜色即可完成vuev-text-field设置标签颜色。

代码思路:

遍历出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>

第一种:

第二种:

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

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

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

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11459483.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存