VUE Class列表样式数绑定案例
Class 与 Style 绑定 v-bind
通过class列表和style指定样式是数据绑定的一个常见需求，他都是元素属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象 或 数组。
语法格式
class 的表达式可以为：
v-bind:class = '表达式' 或者 :class = '表达式'
字符串 :class = "activeClass"
对象 :class = "{ active : isActive , error : hasError }"
数组 :class = "[ 'active' , 'error' ]" 注意加上单引号，不然获取不到data中的值
style 的表达式一般为对象
:style = "{ color : activeColor , fontSize : fontSize + 'px' }"
注意，对象中的value值 activeColor 和 fontSize 是data的属性。
案例
class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-Class与Style绑定</title>
<style>
.active {
color: green;
}
.delete {
background: red;
}
.error {
font-size: 35px;
}
</style>
</head>
<body>
<div id="app">
<h3>Class绑定 v-bind:class 或者 :class</h3>
<p class="active">原始的绑定方式：class="active"</p>
<p v-bind:class="activeClass">v-bind:class="activeClass" 字符串表达式</p>
<!-- key值是样式名称，value是data中绑定的属性，比如下面，当isDelete为true的时候，delete样式就会被渲染 -->
<p :class="{delete:isDelete, error:isError}">对象表达式</p>
<!-- 数组中填写的直接是样式名称，单引号必须写 -->
<p :class="['active','error']">数组表达式</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
isDelete: true,
isError:true
}
})
</script>
</body>
</html>
style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-Class与Style绑定</title>
<style>
.active {
color: green;
}
.delete {
background: red;
}
.error {
font-size: 35px;
}
</style>
</head>
<body>
<div id="app">
<h3>Class绑定 v-bind:class 或者 :class</h3>
<p class="active">原始的绑定方式：class="active"</p>
<p v-bind:class="activeClass">v-bind:class="activeClass" 字符串表达式</p>
<!-- key值是样式名称，value是data中绑定的属性，比如下面，当isDelete为true的时候，delete样式就会被渲染 -->
<p :class="{delete:isDelete, error:isError}">对象表达式</p>
<!-- 数组中填写的直接是样式名称，单引号必须写 -->
<p :class="['active','error']">数组表达式</p>
<h3>Style绑定 v-bind:style 或者 :style</h3>
<!-- 注意，在style绑定的时候，值是css属性值，全部改为驼峰命名，不然报错 -->
<p :style="{color:activeColor,fontSize:fontSize + 'px'}">Style样式绑定</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
isDelete: true,
isError: true,
activeColor: "blue",
fontSize: 20
}
})
</script>
</body>
</html>
