<body>
<!-- 使用class样式:
a)数组
b)三木表达式
c)数组内置对象（对象的键是样式的名字，值是Boolean类型）
d)直接通过对象 -->
<div id="app">
<h2>使用class 样式</h2>
<div :class="class1">我是class样式</div>
<!-- 更改 -->
<button @click="changeClass"></button>
<div :class="class2">我是class样式222</div>
<h2>a)数组</h2>
<div :class='["pink","fs50"]'>数组</div>
<!-- b)三木表达式 -->
<div :class="age<=18?class2:''">未成年</div>
<div :class="age>18?'fs50':''">成年了</div>
<div :class="age>18?class3:''">成年了</div>
<!-- d)直接通过对象 true 有作用 false 无作用-->
<div :class="{pink:true}">直接通过对象 </div>
<div :class="{fs50:true}" > 直接通过对象 </div>
<div :class="{fs50:false}" > 直接通过对象 </div>
<!-- c)数组内置对象（对象的键是样式的名字，值是Boolean类型） -->
<div :class="[{pink:true},{fs50:true}]">直接通过对象 </div>
<div :class="[{pink:false},{fs50:true}]">直接通过对象 </div>
<h3>使用内联样式
1.直接在元素上通过 :style 的形式，书写样式对象
2.将样式对象，定义到 data 中，并直接引用到 :style 中
a)在data上定义样式
b)在元素中，通过属性绑定的形式，将样式对象应用到元素中
3.在 :style 中通过数组，引用多个 data 上的样式对象
a)在data上定义样式
b)在元素中，通过属性绑定的形式，将样式对象应用到元素中</h3>
<!-- 1.直接在元素上通过 :style 的形式，书写样式对象 -->
<div :style="style1">直接在元素上通过</div>
<div :style="{color:'green'}">直接在元素上通过</div>
<button @click="change">按钮</button>
<div :style="style3">直接在元素上通过</div>
<div :style="[style2,style3]">style 中通过数组，引用多个 data 上的样式对象</div>
<div :style="get()">:style 中通过函数返回对象 </div>
</div>
</body>
</html>
<script>
let vm = new Vue({
el: "#app",
data: {
style3:{fontSize:'50px'},
style2:"color: blue",
style1:"color: red",
age:20,
class3:"fs50",
class1:"pink",
class2:"green",
// class3:["pink","fs50"]
},
methods: {
changeClass(){
this.class2="pink"
},
change(){
this.style3.fontSize="30px"
},
get(){
return {color: "blue",fontSize:"50px"}
}
}
})
</script>
12万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
