Vue v-bind动态绑定class实例方法

现在很多网站,都是希望动态切换class,更换css样式。下面我们使用Vue的v-bind绑定class

v-bind动态绑定class

对象语法绑定(常用)

red和size的值为true就在class显示red和size,false就不显示。下面有两种写法:



  • {{list}}
  • {{list}}

注意:v-bind:class指令可以与普通的class特性共存;对应的语法糖:“:class”等于v-bind:class

数组语法绑定

数组语法不常用,主要是它不灵活:

  • {{list}}
const app=new Vue({ el:"#app", data:{ list:"Vue", acli:"aaa", bcli:"bbb", }, })

字符串绑定更数组语法绑定差不多,不常用

  
let vm = new Vue({     el:"#demo",     data:{       classA:"string"     } })

综合的写法

  
var vm = new Vue({     el:"#demo",     data:{       one:"string",       classa:true,       classb:false     } })

v-bind动态绑定style

对象语法绑定(常用)

v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。

  • {{list}}
  • {{list}}
const app=new Vue({ el:"#app", data:{ list:"Vue", color:"red",      size:50 }, })

注:对象语法的value(属性值),如果加上单引号就原样输出,不加就输出data的变量值

数组语法绑定

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

{{list}}
const app=new Vue({ el:"#app", data:{ list:"Vue", baseStyles:{fontSize:"50px",color:"red"}, overridingStyles:{"margin-top":"50px"} }, })

以上就是本次介绍的全部相关知识点,感谢大家的学习和对脚本之家的支持。

你可能感兴趣的