大家好,又见面了,我是你们的朋友全栈君。
上回看了模板语法、计算属性与监听器,今天继续往下看。
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应该是很常用的一个指令,需要一些练习熟练掌握。
近些天身体有点不太好,等好了之后把拖拉的补回来。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/107539.html原文链接:https://javaforall.cn