脚本宝典收集整理的这篇文章主要介绍了我的 Vue.js 学习日记 (四) - v-bind:class / style 用法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
上回看了模板语法、计算属性与监听器,今天继续往下看。
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:组件中同样适用该绑定方式
绑定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应该是很常用的一个指令,需要一些练习熟练掌握。
近些天身体有点不太好,等好了之后把拖拉的补回来。
以上是脚本宝典为你收集整理的我的 Vue.js 学习日记 (四) - v-bind:class / style 用法全部内容,希望文章能够帮你解决我的 Vue.js 学习日记 (四) - v-bind:class / style 用法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。