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. SpringData 完全入门指南

    SpringData 笔记 1. 配置项目 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> < ...

  2. cmake 加入调试信息

    1 首先在CMakeLists.txt中加入 SET(CMAKE_BUILD_TYPE "Debug")1在下面加入: SET(CMAKE_CXX_FLAGS_DEBUG &quo ...

  3. 同时安装不同版本jdk引起的冲突解决方法

    https://blog.csdn.net/xiongyouqiang/article/details/79240521 现象 由于工作原因, 之前用的jdk1.8版本,因为线上生产环境都是jdk1. ...

  4. js实现点击按钮控制展开与收起.

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

  5. Java中的API

    待施工 111 API: Scanner Random String StringBuilder ArrayList 集合详解: 包 import java.util.ArrayList 构造方法pu ...

  6. git上传本地项目带Github上

    创建好线上版本库以后就可以在本地进行上传 1.选择好文件夹右击Git Bash Here 2.先创建本地版本库 git init 3.git add README.md 4.git commit -m ...

  7. Delphi 窗体函数 ShowScrollBar 控制滚动条

    API函数 函数来源:FUNCTION ulong ShowScrollBar(ulong hwnd,ulong wBar,ulong bShow) LIBRARY "user32.dll& ...

  8. 模拟+双指针——cf1244E

    排一遍序然后用l,r指针进行移动,每次移动的是靠1,或靠n更近的那个指针 #include<bits/stdc++.h> using namespace std; typedef long ...

  9. NX二次开发-MFC对话框获取UG界面句柄,设置MFC对话框在UG界面固定显示位置

    extern "C" DllExport void ufusr(char *param, int *retcod, int param_len) { if (UF_initiali ...

  10. Codeforces gym102222 B.Rolling The Polygon 凸包/余弦定理

    题意: 有一个不保证凸的多边形,让你滚一圈,计算某点滚出的轨迹多长. 题解: 求出凸包后,以每个点为转轴,转轴到定点的距离为半径,用余弦定理计算圆心角,计算弧长. #include<iostre ...