vue中如何动态添加样式

vue动态添加样式

vue实现点击切换改变样式

html代码：根据数据动态循环一个列表

<ul>
    <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
</ul>

js代码：

export default {
    data(){
        return{
            dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
            clicked:0   //标识，初始化默认选中第一项
        }
    },
    methods:{
        changeTab(index){
            this.clicked = index;
        }
    }
}

css样式，点击选中添加黑色边框

.bor{
   border:2px solid black;
}

效果：

vue常用指令以及动态添加样式

vue常用指令

Vue的指令是以v-开头的，作用于页面中的元素，所以需要将指令绑定与元素中，从而达到给绑定的元素添加行为的目的。

​ 语法：<元素标签 v-指令 = “表达式”>

1.v-text

用于更新标签包含的文本，它的作用跟双大括号效果是一样的。

2.v-html指令

绑定一些包含html代码的数据在视图上，例如< strong >Daisy</ strong>,这个字符包含了< strong>标签，要想< strong>不被当做普通的字符串渲染出来，发挥< strong>应有的效果，我们就得使用v-html指令 。

3.v-show

指令的取值为true/false，分别对应着显示/隐藏，例如下面这段代码，show1会被显示出来，show2会被隐藏。

4.v-if指令

取值为true/false，控制元素是否需要被渲染，例如下面代码，设置为true的

标签成功渲染出来，而设置为false的,

标签被一行注释代替了，并没有被解析渲染出来。

v-show和v-if的区别: v-if是判断是否有DOM节点, v-show是判断节点是否显示隐藏,如果需要频繁切换显示/隐藏的可以用v-show;如果运行后不太可能需要切换显示/隐藏的可以用v-if

5.v-else指令

和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。

如下图代码所示：

6.v-for指令

遍历data中存放的数组数据，实现列表的渲染。（v-for指令除了可以迭代数组，还可以迭代对象和整数）

7.v-bind指令

用于动态绑定DOM元素的属性;例如 标签的href属性，< img>标签的src属性等。v-bind可以简写成“：”

8.v-on指令

可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中的say()方法，可简写成@ 如下所示：

9.v-model指令

用于表单输入，实现表单控件和数据的双向绑定。

只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。

动态添加样式

动态添加可以采用：class 也可以采用：style

1. :class方式

2. :style方式

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论