vue的style绑定,vue class style

  vue的style绑定,vue class style

  这篇文章主要为大家介绍了Vue.jsClass与风格绑定的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  

目录

   Vue.js类与风格绑定绑定超文本标记语言类对象语法数组语法绑定内联样式对象语法数组语法自动添加前缀总结

  

Vue.js Class与Style绑定

  对于数据绑定,一个常见的需求是操作元素的班级列表和它的内联样式。因为它们都是属性,我们可以用v型装订处理它们;只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v型装订用于班级和风格时,Vue.js专门增强了它。表达式的结果类型除了字符串以外,还可以是对象或数组。

  

绑定HTML Class

  

对象语法

  我们可以传给v绑定:类一个对象,以动态地切换班级。注意,v绑定:类指令可以与普通的班级特性共存。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example class= static :class= { Didi-orange :成熟, didi-green: isNotRipe}/div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  isRipe:没错,

  isNotRipe: false

  }

  })

  /脚本

  /html

  当isRipe和isNotRipe变化时,类列表将相应地更新。例如,如果isNotRipe变为没错,那么班级列表将变为"静态滴滴-橙色滴滴-绿色".

  注:尽管可以用髭标签绑定类,比如class={{className}} ,但是我们不推荐这种写法和v绑定:类混用。

  我们也可以直接绑定数据中的一个对象。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example :class= ddfe /div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  ddfe: {

  isRipe:没错,

  isNotRipe: false

  }

  }

  })

  /脚本

  /html

  还可以在这里绑定一个返回对象的计算属性

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example :class= ddfe /div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  迪迪亚格:4,

  滴滴会员:6000

  },

  计算值:{

  ddfe: function () {

  返回{

  "滴滴橙":this.didiAge 3,

  滴滴-大号:这个。滴滴会员1000

  }

  }

  }

  })

  /脚本

  /html

  

数组语法

  我们可以把一个数组传给v绑定:类以应用一个班级列表。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example :class=[didiHandsome,didiBeautful]/div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  滴滴帅:“滴滴帅”,

  didiBeautful:“didiBeautful”

  }

  })

  /脚本

  /html

  

绑定内联样式

  

对象语法

  虚拟绑定:样式的对象语法十分直观——看着非常像CSS,其实它是一个Java脚本语言对象100 .半铸钢钢性铸铁(Cast Semi-Steel)属性名可以用驼峰式或短横分隔命名。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example :style= { color:didiColor,fontSize: fontSize px }/div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  双色:"橙色",

  字体大小:30

  }

  })

  /脚本

  /html

  通常直接绑定到一个样式对象更好,让模板更清晰。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example :style= ddfe /div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  ddfe: {

  颜色:橙色,

  字体大小:“13px”

  }

  }

  })

  /脚本

  /html

  同样的,对象语法常常结合返回对象的计算属性使用。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2/dist/vue。js /脚本

  /头

  身体

  div id= example :style= ddfe /div

  /body

  脚本

  新Vue({

  el: #example ,

  数据:{

  迪迪亚格:4,

  滴滴会员:6000

  },

  计算值:{

  ddfe: function () {

  返回{

  颜色:this.didiAge3?橙色:绿色,

  fontSize: this.didiMember1000?20px: 10px

  }

  }

  }

  })

  /脚本

  /html

  

数组语法

  虚拟绑定:样式的数组语法可以将多个样式对象应用到一个元素上。

  div id=example :style=[ ddfe,didiFamily]/div

  

自动添加前缀

  当虚拟绑定:样式使用需要添加浏览器引擎前缀的半铸钢钢性铸铁(Cast Semi-Steel)属性时,如转换,Vue.js会自动侦测并添加相应的前缀。

  主流浏览器引擎前缀:

  网络工具包(谷歌,Safari,新版歌剧浏览器,以及几乎所有ios系统中的浏览器(包括ios系统中的火狐浏览器);基本上所有基于网络工具包内核的浏览器)墨子(火狐浏览器)o(旧版歌剧浏览器)ms(即浏览器和边缘浏览器)

  

总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: