vue中动态绑定类和样式的方法代码详解

　　

先列举一些例子

　　 　　 　　类="(“内容”,{radioModel: checkType}]” 　　类=" [siteAppListDirNode,{开放:appitem.open==true}]” 　　类=" [portalCenterMenu, {showNav: ! showHideNav hideNav: showHideNav}]” 　　类=" {shortcutMenuShow: ! showHideNav shortcutMenuHide: showHideNav}” 　　 　　src=" https://www.yisu.com/zixun/userInfo.userFace?userInfo.userFace: defaultHead” 　　 　　

再来看详细解释

　　

Vue。js的核心是一个响应的数据绑定系统,它允许我们在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。被绑定的DOM将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定类就变得非常简单。

　　

<强> 1。数据绑定

　　

vue指令以v -前缀标示,数据绑定的指令v-bind:属性名,简写为:属性名,简单的数据绑定例子如下:

　　 　　 　　& lt; v-bind: href=" https://www.jb51.net/"祝辞首页& lt;/a> 　　 　　

简写:
　　

　　 　　 　　& lt;: href=" https://www.jb51.net/"祝辞首页& lt;/a> 　　 　　

<强> 2。动态绑定类

　　

vue的分隔符默认是{{}},在分隔符里面的字符串会被认为是数据变量,可以通过类=" {{className}} "方式设置类,但是vue不推荐这种方式与v-bind:类的方式混用,二者只能选其一.v-bind:类虽然与类属性里绑定变量的方式不能共存,却可以与原生类的特性共存,一个DOM标签中允许同时出现原生类和v-bind:类。

　　

2.1 v-bind:类支持字符串类型,不建议这样使用,因为字符串值是固定不变的,无法实现动态改变类的需求

　　

HTML代码:

　　 　　 　　& lt; div: class=" classA classB”祝辞Demo1
　　 　　

渲染后的HTML:

　　 　　 　　& lt; div类=" classA classB "祝辞Demo1
　　 　　

2.2 v-bind:类支持数据变量,当变量值改变时,将同时更新class.v-bind:类指令的值限定为绑定表达式,如javascript表达式

　　

HTML代码:

　　 　　 　　& lt; div:类=" classA "祝辞Demo2