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

2024-11-29 18:05:03

前言

在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>

总结

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

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入门教程之绑定class和style样式

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

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

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

基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit
详解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最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有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双向绑定看下面截图这是一个普通的html文件,也并没有引入vue.js,是不是在代码中看到有些熟悉的地方?比如:"v-model","v-on:click",还有常用的"双花括号{{}}"赋值语句. 首先说一下实现双向绑定的思路: 一.创建一个自定义vue js对象,例如上面的wslVue 对象,初始化方法里面需要的参数有:
详解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版本: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合并打包多个组件并实现按需加载

前言随着移动设备的升级.网络速度的提高,用户对于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中

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

相关推荐

随机推荐