前端培训Vue之class 与 style 绑定

1. class 与 style 绑定
1.1. 效果 (04_class 与 style 绑定/test.html)
前端培训
1.2. 理解
1) 在应用界面中, 某个(些)元素的样式是变化的 2) class/style 绑定就是专门用来实现动态样式效果的技术
1.3. class 绑定
1) :class=’xxx’ 2) 表达式是字符串:’classA’ 3) 表达式是对象:{classA:isA,classB:isB} 4) 表达式是数组:[‘classA’,’classB’]
1.4. style 绑定
1) :style=”{color:activeColor,fontSize:fontSize+’px’}” 2) 其中 activeColor/fontSize 是 data 属性
1.5. 编码
<style> .classA { color: red; } .classB {
background: blue;
} .classC { font-size: 20px; } </style>
<div id=”demo”> <h2>1. class 绑定: :class=’xxx'</h2> <p class=”classB” :class=”a”>表达式是字符串: ‘classA'</p> <p :class=”{classA: isA, classB: isB}”>表达式是对象: {classA:isA, classB: isB}</p> <p :class=”[‘classA’, ‘classC’]”> 表达式是数组: [‘classA’, ‘classB’]</p>
<h2>2. style 绑定</h2> <p :style=”{color, fontSize}”>style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”</p>
<button @click=”update”>更新</button> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> new Vue({ el : ‘#demo’, data : { a: ‘classA’, isA: true, isB: false, color: ‘red’, fontSize: ’20px’ }, methods : { update () { this.a = ‘classC’ this.isA = false this.isB = true this.color = ‘blue’ this.fontSize = ’30px’ } } })
</script>

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)