Vue.js 样式绑定(1)
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)的更多相关文章
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- vue.js 样式绑定
简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...
- Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的样式绑定
vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...
- Vue 将样式绑定到一个对象让模板更清晰
Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...
- 一起学Vue之样式绑定
在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
随机推荐
- python skimage库HOG特征提取原码解读
Hog特征+SVM常用来做行人检测. opencv中也有Hog特征提取的原码,但是由于原码不是用python写的,而skimage用python实现了,所以就解读的skimage的代码. 先看用ski ...
- Activity向Fragment传值
发送数据 //Activity传值,通过Bundle Bundle bundle = new Bundle(); bundle.putString("MainActivity", ...
- sort -n
输入如下测试数据: 当按照第一列排列时是正确的: 但按照第二列排序时,喵喵喵???怎么跟说好的不一样啊!!!为什么gugu的50会排在最后? 其实是因为默认是按照第二列的第一个字符来比较的,若想 ...
- 杭电多校第四场-H- K-th Closest Distance
题目描述 You have an array: a1, a2, , an and you must answer for some queries.For each query, you are g ...
- jQuery随机抽取数字号代码
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- hdu 3450 后缀数组
题目大意: 求多个字符串的最长公共子串 基本思路: 参加我的博客hdu2774 代码如下: #include<cstdio> #include<cstring> using n ...
- vue组件 is ref
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- MFC弹出选择文件和选择文件夹代码
选择文件夹 TCHAR szSelectedDir[]; BROWSEINFO bi; ITEMIDLIST *il; bi.hwndOwner = m_hWnd; bi.pidlRoot = NUL ...
- 杂项-笔记-VS：VS2019笔记
ylbtech-杂项-笔记-VS:VS2019笔记 1.返回顶部 1. http://www.ddooo.com/softdown/142335.htm 2. 2.返回顶部 3.返回顶部 4. ...
- svn启动服务
bin目录添加到环境变量classpathsvn --version 查看版本svnadmin create D:\\xx 创建本地中央仓库启动svn服务 cmd命令 svnserve -d -r D ...