demo

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
background: blue;
}
.active {
width: 100px;
height: 100px;
background: antiquewhite;
} </style>
</head>
<body>
<div id="app">
<div v-bind:class="[activeClass, errorClass]"></div>
</div> <script>
new Vue({
el: '#app',
data: {
/* 后面的覆盖前面的样式*/
errorClass: 'text-danger',
activeClass: 'active'
}
})
</script>
</body>
</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. 单实例安装elastic和启动报错解决

    下载 先到官网https://www.elastic.co/cn/downloads/past-releases/elasticsearch-5-5-2下载,我安装的是5.5.2的版本,其他版本直接访 ...

  2. 【Luogu】【关卡2-8】广度优先搜索(2017年10月)

    任务说明:广度优先搜索可以用来找有关“最短步数”的问题.恩,也可以用来“地毯式搜索”.

  3. 分布式锁实现(二):Zookeeper

    目录 前言 设计实现 一.基本算法 二.关键点 临时有序节点 监听 三.代码实现 Curator源码分析 一.基本使用 二.源码分析 后记 前言 紧跟上文的:分布式锁实现(一):Redis ,这篇我们 ...

  4. Map集合类(二.其他map集合jdk1.8)

    java集合笔记一 java集合笔记二 java集合笔记三 1.hashtable(线程安全) 1.存储数据为数组+链表2.存储键值对或获取时通过hash值取模数组长度确定节点在数组中的下标位置 in ...

  5. 启动php-fpm和nginx

    /usr/local/php/sbin/php-fpm #手动打补丁的启动方式/usr/local/php/sbin/php-fpm start sudo /usr/local/nginx/nginx ...

  6. Shiro学习(9)JSP标签

    Shiro提供了JSTL标签用于在JSP/GSP页面进行权限控制,如根据登录用户显示相应的页面按钮. 导入标签库 Java代码   <%@taglib prefix="shiro&qu ...

  7. vue笔记一:设置表头的背景颜色以及下边框颜色

    最近做的一个项目有个小小的需求,就是把表头的背景颜色改为黑色,表格边框颜色改为这个颜色,中间出了些问题,因为vue的表格样式是内联样式,一修改就影响到其他地方的表格样式,尽管我单独加了id还是不行,经 ...

  8. js设计模式——8.中介者模式

    js设计模式——8.中介者模式 /*js设计模式——中介者模式*/ class A { constructor() { this.number = 0; } setNumber(num, m) { t ...

  9. Block 使用总结

    - (void)testBlockWeakObj1 { UILabel *tl = [[UILabelalloc]init];//本地局部变量 __weak UILabel *weakTL = tl; ...

  10. CSS:CSS 提示工具(Tooltip)

    ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...