绑定HTMLCLASS

在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写

class ={{class-a}}

看官方教程时,不推荐这么写,推荐这样

v-bind:class="{ 'class-a': isA, 'class-b': isB }"

官方的解释,我觉得还是挺接地气的,最起码我能看的懂。

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

可以用对象语法来处理它们:

可以这样:https://jsfiddle.net/miloer/36ek1uco/

也可以这样:https://jsfiddle.net/miloer/36ek1uco/1/

也可以使用数组语法来处理:

https://jsfiddle.net/miloer/36ek1uco/2/

我觉得在样式里用表达式判断,这么做挺有创意的,不过个人感觉这么做又繁琐了点,不过官方说:

当有多个条件 class 时这样写有些繁琐。在 1.0.19+ 中,可以在数组语法中使用对象语法:

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

这样是不是好多了。

绑定内联样式:

这个和绑定HTMLCLASS 方法差不多。

https://jsfiddle.net/miloer/36ek1uco/3/

https://jsfiddle.net/miloer/36ek1uco/4/

自动添加前缀

这个我觉得挺方便的,当使用v-bind:style 需要添加前缀CSS时,Vue.js 会自动侦测并添加相应的前缀。

v-bind

  • 缩写: :
  • 类型: * (with argument) | Object (without argument)
  • 参数: attrOrProp (optional)
  • 修饰符:用法:动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。
    • .sync - 双向绑定,只能用于 prop 绑定。
    • .once - 单次绑定,只能用于 prop 绑定。
    • .camel - 将绑定的特性名字转回驼峰命名。只能用于普通 HTML 特性的绑定,通常用于绑定用驼峰命名的 SVG 特性,比如 viewBox
  • 在绑定 class 或 style 时,支持其它类型的值,如数组或对象。

    在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

    没有参数时,可以绑定到一个对象。注意此时 class 和 style 绑定不支持数组和对象。

  • 示例:
    <!-- 绑定 attribute -->
    <img v-bind:src="data:imageSrc"> <!-- 缩写 -->
    <img :src="data:imageSrc"> <!-- 绑定 class -->
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]"></div> <!-- 绑定 style -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定到一个对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- prop 绑定,"prop" 必须在 my-component 组件内声明 -->
    <my-component :prop="someThing"></my-component> <!-- 双向 prop 绑定 -->
    <my-component :prop.sync="someThing"></my-component> <!-- 单次 prop 绑定 -->
    <my-component :prop.once="someThing"></my-component>
  • 另见:

Vue#Class 与 Style 绑定的更多相关文章

  1. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  2. vue class与style 绑定详解——小白速会

    一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...

  3. Vue 使用v-bind:style 绑定样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Vue - class与style绑定

    1.通过v-bind绑定一个class A:直接绑定 B:通过v-bind绑定一个对象 C:绑定一个返回对象的计算属性 D:绑定一个数组对象 2.绑定内联样式 A:直接子啊属性名上面绑定 B:绑定到一 ...

  5. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  7. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  8. Vue学习4:class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

  9. vue从入门到进阶:Class 与 Style 绑定(四)

    绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...

随机推荐

  1. java sleep() 、yield()

    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...

  2. ABAP ole方式对EXCEL进行操作

    DATA: excel    TYPE ole2_object,       workbook TYPE ole2_object,       sheet    TYPE ole2_object,   ...

  3. PL/Proxy介绍

    PL/Proxy 介绍 一.概述 1.PL/Proxy 是一个采用PL Language语言的数据库分区系统. 目的:轻松访问分区数据库 它的理念是代理远程函数体内指定.函数调用同样标签创建的函数,所 ...

  4. HTTP协议与HTML表单(再谈GET与POST的区别)

    HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论.本文将带您浅尝HTTP协议,在了 解HTTP协议的同时将会展示许多被人们忽视的内容.在掌握了H ...

  5. 【python】入门学习(二)

    键盘读取字符串: name = input('What is your first name?').strip()print("Hello " + name.capitalize( ...

  6. IOS- 应用程序生命周期(前后台切换,应用的各种状态)详解

    iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受 ...

  7. September 18th 2016 Week 39th Sunday

    Be the king of the spiritual kingdom that is your heart. 在心灵的国土上,做自己的国王. Most often we are not able ...

  8. 类模板的static成员

    下列代码可以通过编译吗?如何修改使其通过编译? template <class T> struct sum {   static void foo(T op1 , T op2){    c ...

  9. NYOJ题目62笨小熊

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr4AAAK1CAIAAAChInrhAAAgAElEQVR4nO3dO3LjutaG4X8Szj0Qxx

  10. 第一课 移动端&响应式

    一.调试工具介绍(Chrome Emulation) 1.Device(设备相关) 自定义尺寸.Network(网络模拟).UseAgent(浏览器信息).缩放 2.Media(媒体) 3.Netwo ...