菜单

js_脚本之家

2020年3月28日 - 澳门太阳娱乐手机登录
 style="{height:checkType?'423px':'385px'}" src="userInfo.userFace?userInfo.userFace:defaultHead" 

Vue.js 的宗旨是一个响应的数据绑定系统,它同意我们在日常 HTML
模板中利用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM
将与数码保持同步,每当数据有修改,相应的DOM视图也会更新。基于这种特征,通过vue.js动态绑定class就变得特别简单。

1. 数据绑定

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

脚本之家首页

脚本之家首页

js_脚本之家。2. 动态绑定class

vue 的相间符暗中同意是 {{ }},
在相隔符里面包车型地铁字符串会被认为是多少变量,能够因而方式设置class,不过vue不推荐这种方法与 v-bind:class
的章程混用,二者只好选其一。v-bind:class
纵然与class属性里绑定变量的不二等秘书技不能够存活,却得以与原生的class特性共存,
三个DOM标签中允许同期现身原生class和v-bind:class。

2.1 v-bind:class
帮衬string类型,不提议如此使用,因为string值是固定不变的,不恐怕兑现动态改变class的供给

Demo1

Demo1

2.2 v-bind:class
帮助数据变量,当变量值退换时,将同有的时候候更新class。v-bind:class指令的值节制为绑定表达式,如javascript表明式

Demo2

Javascript代码:

data: { classA: 'class-a' //当classA改变时将更新class}

Demo2

写在命令中的值会被看成表明式,如javascript表明式,由此v-bind:class选拔三目运算:

Demo3

Demo3

2.3 v-bind:class 帮忙对象,对象退换时会动态更新class

Demo4

Javascript代码:

data: { isA: false, //当isA改变时,将更新class isB: true //当isB改变时,将更新class}

Demo4

Demo5

Javascript代码:

data: { objectClass: { class-a: true, class-b: false }}

Demo5

2.4: v-bind:class帮助数组, 数组里的变量改造时,会动态更新class列表

Demo6

Javascript代码:

data: { classA: 'class-a', classB: 'class-b'}

Demo6

数组中能够饱含object类型,数组中的object对象改换,也会更新class列表

Demo7

Javascript代码:

data: { classA: 'class-a', objectClass: { classB: 'class-b', // classB 的值为class-b, 则将classB的值添加到class列表 classC: false, // classC值为false,将不添加classC classD: true // classD 值为true,classC将被直接添加到class列表}}

Demo7

小结:推而广之,基本上都一模一样。

如上所述是作者给大家介绍的vue 中动态绑定class 和
style的秘籍代码详细解释,希望对我们全部助于,假若我们有别的疑问请给自身留言,笔者会及时回复大家的。在这也非常感激大家对台本之家网址的支撑!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图