绑定class样式三种写法
绑定class样式--字符串写法 适用于:样式的类名不确定 需要动态指定
<body>
<div id="root">
<!--绑定class样式--字符串写法 适用于:样式的类名不确定 需要动态指定-->
<div class="basic" :class="mood" @click="changMood">{{name}}</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
mood:'normal',
},
methods:{
changMood(){
this.mood = 'happy'
}
}
})
</script>
</body>
绑定class样式--数组写法 适用于:要绑定的样式个数不确定 名字不确定 需要动态指定
<body>
<div id="root">
<!--绑定class样式--数组写法 适用于:要绑定的样式个数不确定 名字不确定 需要动态指定-->
<div class="basic" :class="arr" >{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
arr:['at1','at2','at3'],
},
methods:{
changMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
}
})
</script>
</body>
绑定class样式--对象写法 适用于:要绑定的样式个数确定 名字确定 但要动态决定用不用
<body>
<div id="root">
<!--绑定class样式--对象写法 适用于:要绑定的样式个数确定 名字确定 但要动态决定用不用-->
<div class="basic" :class="classObj" >{{name}}</div><br/><br/>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
classObj:{
at1:false,
at2:false
},
},
methods:{
}
})
</script>
</body>
</html>
绑定style样式写法
注意fontSize和backgroundColor单词写法
<body>
<div id="root">
<!--绑定style样式--对象写法 -->
<div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div><br/><br/>
<div class="basic" :style="styleObj">{{name}}</div><br/><br/>
<!--绑定style样式--数组写法 -->
<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div><br/><br/>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
fsize:40,
styleObj:{
fontSize: '40px'
},
styleObj2:{
backgroundColor:'orange'
}
},
})
</script>
</body>
</html>