绑定样式
分为绑定class与绑定style
首先创建css属性
<style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ background-color: #4158D0; background-image: linear-gradient(328deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); } .sad{ background-color: #FFFFFF; background-image: linear-gradient(60deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%); } .normal{ background-color: #8EC5FC; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); } .a1{ text-align: center; } .a2{ text-align: right; text-shadow: #3cc7f5 10px 10px 2px; } .a3{ text-indent: 2em; border-radius: 10px; } </style>
class绑定
字符串写法
适用于样式的类名不确定,需要动态指定
<!--绑定class样式--字符串写法,适用于样式的类名不确定,需要动态指定--> <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
在script中写methods方法
methods:{ changeMood(){ const arr = ['happy','sad','normal'] const aa = Math.floor(Math.random()*3) this.mood = arr[aa] } }
点击标签内部随机切换
数组写法
适用于要绑定的样式个数不确定,名字也不确定
<!--绑定class样式--数组写法,适用于要绑定的样式个数不确定,名字也不确定--> <div class="basic" :class="arr">{{name}}</div>
arr作为vue的data属性,相当于多种属性叠加
arr:['a1','a2','a3'],
对象写法
适用于要绑定的样式个数确定,名字也确定 但要动态决定
<!--绑定class样式--对象写法,适用于要绑定的样式个数确定,名字也确定 但要动态决定--> <div class="basic" :class="obj">{{name}}</div>
obj:{ a1:false, a2:false },
可以动态修改false与true来决定是否应用该样式
style绑定
对象写法
<!--绑定style样式--对象写法--> <div class="basic" :style="styleobj">{{name}}</div>
styleobj:{ fontSize:'40px' }
直接修改style的值进行更改样式
总结
<!-- 绑定样式: 1.class样式 写法: :class='xxx',xxx可以是字符串,对象,数组 字符串用于样式的类名不确定,需要动态指定 对象用于样式个数确定,名字也确定 但要动态决定 数组用于样式个数不确定,名字也不确定 2.style样式 :style="{fontSize:xxx}“其中xxx是动态值 -->
over
标签:arr,name,样式,text,绑定,day61,background From: https://www.cnblogs.com/GUGUZIZI/p/17055137.html