一、v-bind(:)绑定class属性
1、数组
<h1 :class="['red','thin']">好烦呀，绘画培训班很怕被坑呀。</h1>
2、数组中使用三元表达式
<h1 :class="['red','thin',flg?'italic':'']">好烦呀，绘画培训班很怕被坑呀。</h1>
3、数组中嵌套对象
<h1 :class="['red','thin',{'italic':flg}]">好烦呀，绘画培训班很怕被坑呀。</h1>
4、直接使用对象
<h1 :class="{red:true,thin:true,'italic':flg,active:false}">好烦呀，绘画培训班很怕被坑呀。</h1>
5、总的说明
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 正常使用 -->
<h1 class="red thin">好烦呀，绘画培训班很怕被坑呀。</h1>
<!-- v-bind绑定class，值为数组，数组内为class字符串 -->
<h1 :class="['red','thin']">好烦呀，绘画培训班很怕被坑呀。</h1>
<!-- 绑定的数组中可以使用三元表达式 -->
<h1 :class="['red','thin',flg?'italic':'']">好烦呀，绘画培训班很怕被坑呀。</h1>
<!-- 在数组中嵌套对象来替代三元表达式，提高代码可读性 -->
<h1 :class="['red','thin',{'italic':flg}]">好烦呀，绘画培训班很怕被坑呀。</h1>
<!-- v-bind绑定class值也可以是个对象（属性值可带引号也可不带） -->
<h1 :class="{red:true,thin:true,'italic':flg,active:false}">好烦呀，绘画培训班很怕被坑呀。</h1>
<!-- 对象也可直接在Vue对象数据里定义 -->
<h1 :class="classObj">好烦呀，绘画培训班很怕被坑呀。</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flg:true,
classObj:{red:true,thin:true,'italic':true,active:false}
}
})
</script>
</body>
</html>
二、使用内联样式/v-bind(:)绑定style属性
1、直接接对象
<h1 :style="{color:'red','font-weight':200}">买了别人不要的课程试试</h1>
2、接定义到Vue对象data中的对象属性名
<h1 :style="styleObj">买了别人不要的课程试试</h1>
3、接数组，引用多个Vue对象data的数据
<h1 :style="[styleObj,styleObj2]">买了别人不要的课程试试</h1>
4、总的说明
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 对象的属性有（-）必须加引号 -->
<!-- 绑定后面值直接加css样式对象 -->
<h1 :style="{color:'red','font-weight':200}">买了别人不要的课程试试</h1>
<!-- 把css样式对象放在Vue对象data中 -->
<h1 :style="styleObj">买了别人不要的课程试试</h1>
<!-- 接数组，引用多个data中的样式对象，直接写属性名 -->
<h1 :style="[styleObj,styleObj2]">买了别人不要的课程试试</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj: {
color: 'red',
'font-weight': 200
},
styleObj2:{
'font-style':'italic'
}
}
})
</script>
</body>
</html>
网友评论