H5W3
当前位置:H5W3 > 其他技术问题 > 正文

[vue]为什么v-bind:class的第二个class需要加引号

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>

JS代码

var vm=new Vue({
    el:'#example',
    data:{
        isActive:true,
        hasError:true
    }
    
    
});

我的问题就是为什么了第2个class是有引号的。
如果我去了引号,下面的就不能生效

<div class="static"
     v-bind:class="{ active: isActive, text-danger: hasError }">test
</div>

谷歌浏览器内通过检查元素查看,element栏中也看不见相关内容

3.我所做的尝试

谷歌和百度的中文搜索有相关内容,但没有答案,比如下面这个
http://blog.csdn.net/h_025/ar…

谷歌的英文,我不知道该用什么合适的英文关键词。

4.如何诸位想要尝试下,给出vue.js的CDN

<script src="https://unpkg.com/vue"></script>

回答:

因为 {}内的代码是要拿去当js解析的,js中变量是没有用 ‘ – ‘号连接

就像 css中 font-size 是用 – 号连接

到了js中 就必须用驼峰的写法

回答:

此处,v-bind后面的值为表达式,表达式写法和JS基本一样,但是所有的this都被省略。
JS里面,键名如果有-符号,也是需要加引号。JS中

{
    active: isActive,
    text-danger: hasError
}

是无效的,而

{
    'active': isActive,
    'text-danger': hasError
}

是有效的

回答:

谢邀

问题描述的很详细也有尝试解决的思路先赞一个。

关于具体原因上面给出的答案也已经很清楚了,就不再赘述了。我这边还有一点小建议就是在学习 Vue 之前 JS 语言基础最好还是要再加强一下,这样可以少走很多弯路。

本文地址:H5W3 » [vue]为什么v-bind:class的第二个class需要加引号

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址