Vue.js中用v-bind绑定class的注意事项

前言

在Vue.js版本：1.0.27，使用Vue.js中V-bind指令来绑定class和style时，Vue.js对其进行了增强。表达式结果出了字符串之外，还可以是对象或者数组。

这里自己对其进行了测试，发现有一下的问题：

如果使用对象语法对class进行绑定话，class名称必须加上引号，代表所对应的样式，否则会将其当做对象的属性，从而使得初始化报错。

<!DOCTYPE html>
<html lang="en"> 

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script>
 <style>
 .static {
 font-size: 120px;
 width: 600px;
 margin: 0 auto;
 background-color: yellow;
 height: 120px;
 line-height: 120px;
 text-align: center;
 } 

 .class-a {
 color: #FF0000;
 } 

 .class-b {
 text-decoration: underline;
 }
 </style>
</head> 

<body>
 <div id="app">
 <div v-bind:class="classObject">
 关于class的绑定
 </div>
 </div>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 classObject: {
 //'class-a',不能写成class-a（不带引号）；这里的classObject是js对象，而class-b是代表的是一个样式，所以必须写成'class-a',用引号括起来。
 //否则这里的class-a只能代表classObject的一个属性名称而已，这样vuejs在初始化时，会报错。
 'class-a':false,
 'class-b': true
 }
 }
 });
 </script>
</body> 

</html>

参考资料：

Vue.js官网----http://cn.vuejs.org/guide/class-and-style.html

补充：

在这里，自己感觉代码中的classObject有点像散列表，key是一个样式class，而value是boolean类型的值。

从console中获取和改变classObject对象中class-a值，见下图：

看到console中操作，让我觉得对于classObject确实有点像散列表类型。为了证实这个，可以去看看源码（ps：自己没看）。

在Vue.js1.0.19，作者为其添加了一些语法，在数组也可以使用对象语法：

<div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定</div>

<div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div>

上面，对于classA可以加引号和不加引号，下面是自己的测试代码。

<!DOCTYPE html>
<html lang="en"> 

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://cdn.bootcss.com/vue/1.0.27/vue.js"></script>
 <style>
 .static {
 font-size: 120px;
 width: 600px;
 margin: 0 auto;
 background-color: yellow;
 height: 120px;
 line-height: 120px;
 text-align: center;
 } 

 .class-a {
 color: #FF0000;
 } 

 .classB {
 text-decoration: underline;
 } 

 .classC{
 text-shadow: 2px 2px 4px #000000;
 }
 </style>
</head> 

<body>
 <div id="app">
 <!-- 两种绑定：加引号和不加引号，都可以 -->
 <div v-bind:class="[classA, { 'classB': isB, 'classC': isC }]">class绑定</div>
 <div v-bind:class="[classA, { classB: isB, classC: isC }]">class绑定</div>
 </div>
 <script>
 var vm = new Vue({
 el: '#app',
 data: {
 classA: 'class-a',
 isB: true,
 isC: true
 } 

 });
 </script>
</body> 

</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • Vue.js每天必学之Class与样式绑定

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"

  • 详解Vue.js动态绑定class

    Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c

  • Vue.js实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • Vue.js每天必学之表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • 深入理解vue.js双向绑定的实现原理

    深入理解vue.js双向绑定的实现原理

    前言 大家都知道Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; // 为obj定义一个名为hello的访问器属性 Object.defin

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • 利用vue.js把静态json绑定bootstrap的table方法

    直接上代码 嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.b

  • 纯JS如何实现vue.js下的双向绑定功能

    纯JS如何实现vue.js下的双向绑定功能

    目录 首先说一下实现双向绑定的思路: 再说一下实现这些功能的js主要的方法有哪些: 最后需要创建哪些工具类? 实现vue双向绑定 看下面截图 这是一个普通的html文件,也并没有引入vue.js,是不是在代码中看到有些熟悉的地方?比如:"v-model","v-on:click",还有常用的"双花括号{{}}"赋值语句. 首先说一下实现双向绑定的思路: 一.创建一个自定义vue js对象,例如上面的wslVue 对象,初始化方法里面需要的参数有:

  • 详解Vue.js Class与Style绑定

    详解Vue.js Class与Style绑定

    目录 Vue.js Class与Style绑定 绑定HTML Class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 总结 Vue.js Class与Style绑定 对于数据绑定,一个常见的需求是操作元素的class列表和它的内联样式.因为它们都是attribute,我们可以用v-bind处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind用于class和style时,Vue.js专门增强了它.表达式的结果类型除了字符串以外,还可以是

  • Vue.js中用v-bind绑定class的注意事项

    Vue.js中用v-bind绑定class的注意事项

    前言 在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强.表达式结果出了字符串之外,还可以是对象或者数组. 这里自己对其进行了测试,发现有一下的问题: 如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错. <!DOCTYPE html> <html lang="en"> <head> <me

  • Vue.js中的extend绑定节点并显示的方法

    在使用Vue.js时,可以使用Vue.extend()方法创建一个子类,传入参数包含了一个对象.其中,在extend中的data和vue实例化对象中的data写法不一样.下面利用实例说明,操作如下: 第一步,创建一个静态页面并引入vue.js文件,并在主体元素标签中插入一个div,设置id属性,如下图所示: 第二步,在<script></script>标签中调用Vue.extend(),设置template和data,如下图所示: 第三步,使用new关键字调用$mount(),将创

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • 使用Vue.js实现数据的双向绑定

    目录 如何用Vue.js实现数据的双向绑定? 1. 理解双向绑定 2. 使用v-model指令 3. 使用自定义组件实现双向绑定 4. 数据劫持 5. 模板引擎 6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定? 在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据.在本文中,我们将介绍如何用Vue.js实现数据的双向绑定. 1. 理解双向绑定 首先,我们需要了解双向绑定的原理.在Vue.js中

随机推荐