vue中使用v-if,v-else来设置css样式的步骤

我们在使用vue项目开发时，v-if是使用的非常多的，在这里我们谈谈如何使用v-i来绑定修改css样式，使用的主要是双向数据绑定，即通过改变他的状态来改变他的样式，这篇文章主要介绍了vue中如何使用v-if,v-else来设置css样式,需要的朋友可以参考下

推荐阅读：

Vue的v-if和v-show的区别图文介绍

        我们在使用vue项目开发时，v-if是使用的非常多的，在这里我们谈谈如何使用v-i来绑定修改css样式，使用的主要是双向数据绑定，即通过改变他的状态来改变他的样式，来个实例说明下：

第一步：

        主要使用的是三元判断的方式（需要改变的div里使用），并设置好点击事件

                状态？“第一个class名”：“第二个class名”

第二步：

        在javascript部分，设置默认属性,设置点击事件

                quxiaoTit:true

第三步：

        在css部分设置它的改变前样式和改变后样式

        我这里是使用的定位，改变他先后的定位的不同

到此这篇关于vue中如何使用v-if,v-else来设置css样式的文章就介绍到这了,更多相关vue 使用v-if,v-else设置css样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

• Vue中v-if、v-if-else、v-else-if与v-show的基本使用
• 如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)
• 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
• Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
• 对vue v-if v-else-if v-else 的简单使用详解
• vue.js 使用v-if v-else发现没有执行解决办法