vue.js - [vue]为什么v-bind:class的第二个class需要加引号
本文介绍了vue.js - [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中 就必须用驼峰的写法
这篇关于vue.js - [vue]为什么v-bind:class的第二个class需要加引号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文