1 概述
v-bind:class='表达式' 或 :class='表达式'
class 的表达式可以为：
字符串 :class="activeClass"
对象 :class="{active: isActive, error: hasError}"
数组 :class="['active', 'error']" 注意要加上单引号,不然是获取data中的值
v-bind:style='表达式' 或 :style='表达式'
style 的表达式一般为对象
:style="{color: activeColor, fontSize: fontSize + 'px'}"
注意：对象中的value值 activeColor 和 fontSize 是data中的属性
2 要点
<body>
<!-- 第2步:定义样式 -->
<style>
.active {
color: green;
}
.delete {
background: red;
}
.error {
font-size: 30px;
}
</style>
<div id="app">
<h2>Class绑定，v-bind:class 或 :class</h2>
<!--activeClass会从data中获取值为active,则对应样式为绿色-->
<p v-bind:class="activeClass">字符串达式</p> <!-- isDelete为 true，渲染delete样式；当 hasError为false，不取 error 样式;-->
<p :class="{delete: isDelete, error: hasError}">对象表达式</p>
<!--- 渲染 'active', 'error' 样式,注意要加上单引号,不然是获取data中的值 -->
<p :class="['active', 'error']">数组表达式</p>
<h2>Style绑定, v-bind:style 或 :class</h2>
<p :style="{color: activeColor, fontSize: fontSize + 'px'}">Style绑定</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeClass: 'active',
isDelete: true,
hasError: false,
activeColor: 'red',
fontSize: 20
}
})
</script>
</body>
网友评论