大家好，又见面了，我是你们的朋友全栈君。
上节回顾
上回看了模板语法、计算属性与监听器，今天继续往下看。
v-bind 与 class
v-bind:class有 4 种方式，分别是：
1.内联
<h3 v-bind:class="{ active : isActive,'text-danger' : hasError }">i am a h3</h3>2.数据对象
<h3 v-bind:class="classDataObject">i am a h3</h3>3.计算属性
<h3 v-bind:class="classComputedObject">i am a h3</h3>4.数组
<h3 v-bind:class="[isActive, hasError]">i am a h3</h3>无论是哪种方式绑定，依据都是一样的，表达式成立就输出，不成立就不输出
内联输出结果：
<h3 class="active">i am a h3</h3>tip:可以通过在浏览器控制台修改app.hasError的值来观察h3标签class的变化
tip：组件中同样适用该绑定方式
v-bind 与 style
绑定style与绑定class基本一样：
- 内联
- 数据对象
- 计算属性
- 数组
都可以，例如绑定计算属性：
html:
<tr v-bind:style="size">
data:
data: { fontSize: 'fontSize: 20px;'}computed:
computed:{
size: function () {
return this.fontSize
}
}输出：
<tr style="font-size: 20px;"></tr>tip：有提到绑定浏览器引擎前缀的CSS属性时，vue会自动添加
小节
绑定class应该是很常用的一个指令，需要一些练习熟练掌握。
近些天身体有点不太好，等好了之后把拖拉的补回来。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/107539.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
