（9）打鸡儿教你Vue.js
2024-08-26 09:47:22
样式绑定
设置元素的样式
用 v-bind 来设置样式属性
class 与 style 是 HTML 元素的属性
<div v-bind:class="{ active: isActive }"></div>
<div class="active"></div>
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
v-bind:style 直接设置样式
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
<script>
new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
</script>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
最新文章
- https证书提供商
- 5X + 2Y +Z = 50 的所有非负整数解
- 01、手把手Android攻城入门
- Http 1.1协议
- Java 集合类详解（含类图）
- MYSQL创建多张表，相同表结构，不同表名
- white-space的值
- LINQ Distinct()
- 深入分析volatile的实现原理
- [Linux] memache打印所有的key
- c++ 指针与const的三种组合
- Spring开始
- 异步Async
- Android笔记（五）：广播接收者（Broadcast Receiver）
- caffe的运行create_data.sh前对VOC2007图片格式的更改
- js 乘法 4.39*100 出现值不对问题解决
- gson 设置多个别名SerializedName
- 【CF960G】Bandit Blues
- Django 自定义分页类
- rdlc报表出现多余空白页面