绑定样式
不要自己动用DOM,使用Vue的属性 :class
所以不改变的样式正常写,改变的样式用:class
指定一个data变量
class = “” //这是正常使用
:class="表达式" // 会解析该表达式
单个类样式的动态使用 – 字符串写法
用于要绑定的类的名字不确定
<style>
/* 类样式 */
.basic {
height: 200px;
width: 600px;
}
.happy {
border: blue solid 2px;
background-color: red;
}
.sad {
border: yellow solid 2px;
background-color: greenyellow;
}
.normal {
border: black solid 2px;
background-color: blue;
}
</style>
<body>
<!-- 容器 -->
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
new Vue({
el: '#root',
data() {
return {
name: '类样式实例',
mood: 'normal',
}
},
methods: {
changeMood() {
const arr = ['sad', 'normal', 'happy'];
this.mood = arr[Math.floor(Math.random() * 3)];
}
}
})
</script>
</body>
多个类样式的动态使用 – 数组写法
用于要绑定的类的名字和个数都不确定
<div class="basic" :class="fontArr">{{name}}</div>
data() {
return {
name: '类样式实例',
mood: 'normal',
fontArr: ['font1', 'font2', 'font3']
}
补充对数组的操作:
删除 | 添加 | |
---|---|---|
列表头 | shift | ushift |
列表尾 | push | pop |
对象写法
用于要绑定的类的名字和个数都确定,但是要动态的选择要不要用
<div class="basic" :class="fontObj">{{name}}</div>
data() {
return {
name: '类样式实例',
fontObj: {
font1: true,
font2: true,
font3: true
}
}
}
内联style动态绑定样式 – 用对象
<div class="basic" :style="styleObj">{{name}}</div>
<div class="basic" :style="styleArr">{{name}}</div>
styleObj对象内的属性是已有的样式属性用小驼峰命名格式写的
styleArr数组内是有多个styleObj组成。
eg:
<body>
<!-- 容器 -->
<div id="root">
<div class="basic" :style="styleObj">{{name}}</div>
<div class="basic" :style="styleArr">{{name}}</div>
</div>
<script>
Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
new Vue({
el: '#root',
data() {
return {
name: '类样式实例',
styleObj: {
fontSize: 50 + 'px',
backgroundColor: 'red',
color: 'blue'
},
styleArr: [{
fontSize: 50 + 'px',
},
{
backgroundColor: 'red',
},
{
color: 'blue'
}
]
}
},
})
</script>
</body>
下一节:前端之vue条件渲染、列表渲染