hg888皇冠手机登录

Vue.js中用v-bind绑定class的注意事项

八月 23rd, 2019  |  www.hg888.com

观察console中操作,让笔者觉着对于classObject确实有一点像散列表类型。为了表明那一个,能够去会见源码(ps:本人没看)。

你或者感兴趣的篇章:

  • vue.js入门教程之绑定class和style样式
  • 详解Vue.js动态绑定class
  • Vue.js中用v-bind绑定class的注意事项
  • vue.js绑定class和style样式(6)
  • 详解vue.js之绑定class和style的示范代码
  • Vue.js每一日必学之Class与体制绑定
  • vue.js学习笔记之绑定style样式和class列表
  • 学习vue.js中class与style绑定
  • Vue.js基础学习之class与体制绑定
  • vue.js完成的绑定class操作示例
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>


data: {
 isA: true,
 isB: false
}

我们也能够在对象中传播更加多属性用来动态切换四个 class 。其它,
v-bind:class 指令能够与普通的 class 属性共存。如下模板:

一经应用对象语法对class实行绑定话,class名称必得抬高引号,代表所对应的体制,不然会将其看做对象的性情,进而使得最早化报错。

<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">
<div v-bind:class="[classA, classB]">


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

v-bind:style 的数组语法能够将多少个样式对象应用到贰个元素上:

www.hg888.com 1

渲染为:

请注意:纵然能够用 Mustache 标签绑定 class,举例
class="{{ className }}",可是大家不引入这种写法和
v-bind:class混用。两个只可以选其一!

数组语法

总结

只要这么写是可以试行成功的,但有错误

一、前言

数据绑定贰个分布须要是操作元素的 class
列表和它的内联样式。因为它们都以属性 ,大家得以用v-bind
管理它们:只要求总括出表明式最后的字符串。不过,字符串拼接麻烦又易错。由此,在
v-bind 用于 class 和 style 时, Vue.js
特意巩固了它。表明式的结果类型除了字符串之外,仍是可以是目的或数组。

<div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div>

当有七个标准class时这样写多少麻烦。在1.0.19+中,能够在数组语法中使用对象语法:

四、总结

<my-component v-bind:class="{ active: isActive }"></my-component>

从console中收获和改动classObject对象中class-a值,见下图:

渲染为:

<div v-bind:class="classObject"></div>


data: {
 classObject: {
 'class-a': true,
 'class-b': false
 }
}
<div v-bind:class="classObject"></div>


data: {
 classObject: {
  active: true,
  'text-danger': false
 }
}

<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定</div>

<div class="class-a classB">

直白绑定到三个体裁对象一般更加好,让模板更清楚:

绑定 HTML Class

参考资料:

以上所述是我给我们介绍的Vue.js绑定HTML
class数组语法错误,希望对我们有着援助,若是大家有任何疑问请给自个儿留言,作者会及时恢复生机我们的。在此也非常谢谢我们对台本之家网址的支撑!

v-bind:style 的对象语法十三分直观——看着那几个像 CSS,其实它是四个JavaScript 对象。CSS
属性名能够用驼峰式(camelCase)或短横分隔命名(kebab-case):

Class 与 Style 绑定

在Vue.js1.0.19,作者为其增添了部分语法,在数组也得以行使对象语法:

<div class="class-a class-b">

三、数组语法

即使您也想依照标准切换列表中的 class ,能够用安慕希表达式:

此处本身对其开展了测量检验,开采有须臾间的标题:

同样的,对象语法日常结合重返对象的猜想属性使用。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>


data: {
 activeColor: 'red',
 fontSize: 30
}
<!DOCTYPE html> 
<html lang="en"> 

<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script> 
 <style> 
 .static { 
 font-size: 120px; 
 width: 600px; 
 margin: 0 auto; 
 background-color: yellow; 
 height: 120px; 
 line-height: 120px; 
 text-align: center; 
 } 

 .class-a { 
 color: #FF0000; 
 } 

 .class-b { 
 text-decoration: underline; 
 } 
 </style> 
</head> 

<body> 
 <div id="app"> 
 <div v-bind:class="classObject"> 
 关于class的绑定 
 </div> 
 </div> 
 <script> 
 var vm = new Vue({ 
 el: '#app', 
 data: { 
 classObject: { 
 //'class-a',不能写成class-a(不带引号);这里的classObject是js对象,而class-b是代表的是一个样式,所以必须写成'class-a',用引号括起来。 
 //否则这里的class-a只能代表classObject的一个属性名称而已,这样vuejs在初始化时,会报错。 
 'class-a':false, 
 'class-b': true 
 } 
 } 
 }); 
 </script> 
</body> 

</html> 
data: {
classA: 'class-a',
classB: 'class-b',
classC: 'class-c',
isB: true,
isC: false
}
<div :class="[classA, { classB: isB, classC: isC }]">

www.hg888.com,当 isA 和 isB 变化时,class 列表将相应地换代。比如,倘诺 isB 变为
true,class 列表将变为 “static class-a class-b“。

当 v-bind:style 使用须要一定前缀的 CSS 属性时,如 transform ,Vue.js
会自动侦测并加上相应的前缀。

Vue.js官网—-

Vue.js绑定HTML class数组语法错误,详细的情况如下所示:

指标语法

上述就是本文的全体内容,希望对大家的学习抱有帮助,也冀望大家多多扶助脚本之家。

你只怕感兴趣的稿子:

  • vue.js入门教程之绑定class和style样式
  • 详解Vue.js动态绑定class
  • vue.js绑定class和style样式(6)
  • 详解vue.js之绑定class和style的示范代码
  • Vue.js每日必学之Class与体制绑定
  • vue.js学习笔记之绑定style样式和class列表
  • Vue.js绑定HTML
    class数组语法错误的原故解析
  • 学习vue.js中class与style绑定
  • Vue.js基础学习之class与体制绑定
  • vue.js达成的绑定class操作示例

明天在官方网站教程上开采叁个错误是如此的,下边看图

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>


data: {
 activeColor: 'red',
 fontSize: 30
}

一样的,对象语法平日结合再次来到对象的乘除属性使用。

在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其展开了增进。表明式结果出了字符串之外,还是能是目的只怕数组。

举例是短横符那样的 class-b
是不成功的,所以这里照旧要用标准的对象语法加上引号

数组语法

您也得以一向绑定数据里的二个对象:

标签:, ,

Your Comments

近期评论

    功能


    网站地图xml地图