脚本宝典收集整理的这篇文章主要介绍了Vue中使用 class 类样式的方法详情,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
script
标签中创建一个 vm
实例,在实例的 data
数据中心写上 isActive:true
,true
表示使用此样式,false
则表示不使用<script src="js/vue.js"></script> <script> let vm = new Vue({ el:'#app', data:{ isActive:true } </script>
v-bind
指令 使用class
类<div id="app"> <h1 :class="{active:isActive}">我是使用布尔值引用class样式</h1> </div>
data:{ isActive: false }
class
类data
中有一个对象数组,把他渲染到视图层上,我想让 索引为 偶数的引用<body> <div id="app"> <ul> <li v-for="(ITem,index) in list">{ <!-- -->{index}}----{ <!-- -->{item.name}}</li> </ul> </div> <script src="js/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ list:[ {id:1,name:"金克斯"}, {id:2,name:"杰斯"}, {id:3,name:"凯特琳"}, {id:4,name:"蔚"}, ] } }) </script>
<li v-for="(item,index) in list" :class="{active: index%2 == 0}"> { <!-- -->{index}}----{ <!-- -->{item.name}} </li>
<li v-for="(item,index) in list" :class="{active: index === mark}"> { <!-- -->{index}}----{ <!-- -->{item.name}} </li>
let vm = new Vue({ el:"#app", data:{ list:[ {id:1,name:"金克斯"}, {id:2,name:"杰斯"}, {id:3,name:"凯特琳"}, {id:4,name:"蔚"}, ], mark:0 } })
多个类,可以直接封装到对象中,在视图层直接调用对象名即可!
data
中是一个对象,对象中罗列出多个类<style> .f50{ font-size: 50px; } .blue{ color: blue; } .background{ background-color: black; } </style> <body> <div id="app"> <p :class="classObject">中国人</p> </div> </body>
let vm = new Vue({ el:"#app", data:{ classObject:{ "f50":true, "blue":true, "background":true } } })
let vm = new Vue({ el:"#app", computed:{ // 1. 自定义的计算属性名, // 2.计算属性做的事情,我们将其封装到函数中 myclass(){ return { "f50":true, "blue":true, "background":true } } } })
<p :class="myclass">中国人</p>
.f50{ font-size: 50px; } .blue{ color: blue; } .background{ background-color: black; }
<!-- 注意,class 名要加引号 --> <p :class="['f50','blue','background']">一周又一周</p>
以上是脚本宝典为你收集整理的Vue中使用 class 类样式的方法详情全部内容,希望文章能够帮你解决Vue中使用 class 类样式的方法详情所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。