demo

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <title>Vue </title>
  6.    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7.    <style>
  8.      .text-danger {
  9.        background: blue;
  10.      }
  11.      .active {
  12.        width: 100px;
  13.        height: 100px;
  14.        background: antiquewhite;
  15.      }
  16.  
  17.    </style>
  18.  </head>
  19.  <body>
  20.  <div id="app">
  21.    <div v-bind:class="[activeClass, errorClass]"></div>
  22.  </div>
  23.  
  24.  <script>
  25.    new Vue({
  26.      el: '#app',
  27.      data: {
  28.       /* 后面的覆盖前面的样式*/
  29.        errorClass: 'text-danger',
  30.        activeClass: 'active'
  31.      }
  32.    })
  33.  </script>
  34.  </body>
  35.  </html>

效果：

2018-03-20   13:36:35

Vue.js 样式绑定(1)的更多相关文章

  1. vue.js样式绑定

    vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...

  2. 10.Vue.js 样式绑定

    Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...

  3. vue.js 样式绑定

    简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...

  4. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  5. vue的样式绑定

    vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...

  6. Vue 将样式绑定到一个对象让模板更清晰

    Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...

  7. 一起学Vue之样式绑定

    在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...

  8. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  9. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

随机推荐

  1. XStream的简单使用

    XStream XStream是一个java对象和xml相互转换的工具 创建XStream对象:XStream stream = new XStream() Java对象转换成xml:stream . ...

  2. echarts 给formatter文字添加不同颜色

    legend: { x : 'center', y : 'bottom', icon: "circle", itemWidth: 8, // 设置宽度 itemHeight: 8, ...

  3. Linux设置以root用户开机自动登录桌面

    目录 Ubuntu 18.04系统下设置 Redhat7.6系统下设置 Ubuntu 18.04系统下设置 1. 允许使用root用户登录桌面    Ubuntu默认不允许使用root用户登录桌面的, ...

  4. iptables 防火墙（上）

    iptables 防火墙(上) 1. 防火墙概述 1.1 概念与作用 网络中的防火墙是一种将内部网络和外部网络分开的方法,是一种隔离技术.防火墙在内网与外网通信时进行访问控制,依据所设置的规则对数据包 ...

  5. PHP-两数相除

    给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 示例 1: 输 ...

  6. 数据库常用SQL语句

    显示所有的数据库 show databases; 新建数据库 create database if not exists 数据库名  default character set = 'utf8'; 删 ...

  7. string::size_type 页73 size_t 页90

    异同点: size_t size_type sizeof(XXX)所得到的结果的类型就是 string类类型和vector类类型定义的类型,string的size操作返回来的是string::size ...

  8. 重新创建redis集群的注意事项

    一.重新创建redis集群的注意事项 1.将每个节点下aof.rdb.nodes.conf本地备份文件删除: 2.127.0.0.1:7001> flushdb #清空当前数据库(这一步可以省略 ...

  9. hdu 4300 拓展kmp

    题目大意: 输入样例个数,每个样例有两行,第一行是26个字母,分别代表a~z加密后的密文:第二行代表一串密文+明文,密文一定是完整的,但明文可能不完整,让你输出最短的(密文+明文): 基本思路: 拓展 ...

  10. 前端避免XSS（跨站脚本攻击）

    尽量或禁止使用危险的脚本. 示例1: 如:eval() eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码.