1.问题是关于vue.js框架中class绑定的
2.代码
下面是中文官网给出的示例代码,英文官网也是相同的(我加了test内容,方便debug)
https://cn.vuejs.org/v2/guide...
搜索:绑定 HTML Class
即可
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">test </div>
我的问题就是为什么了第2个class是有引号的。
如果我去了引号,下面的就不能生效
<div class="static" v-bind:class="{ active: isActive, text-danger: hasError }">test </div>
原因:
因为 {}内的代码是要拿去当js解析的,js中变量是没有用 ' - '号连接
就像 css中 font-size 是用 - 号连接
到了js中 就必须用驼峰的写法
此处,v-bind
后面的值为表达式,表达式写法和JS基本一样,但是所有的this
都被省略。
JS里面,键名如果有-
符号,也是需要加引号。JS中
{ active: isActive, text-danger: hasError }
是无效的,而
{ 'active': isActive, 'text-danger': hasError }
是有效的