VUE v-bind绑定class和style
1、绑定class
（1）对象语法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<div class="static" :class="{'active':isActive,error:isError}">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isActive: true,
isError: true
}
});
</script>
</body> </html>
对象可以传入多个属性，：class可以与普通的class共存。
（2）数组语法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<div class="static" :class="[activeCls,errorCls]">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeCls: 'active',
errorCls: 'error'
}
});
</script>
</body> </html>
2、绑定内联样式
v-bind:style 给元素绑定内联样式，也有对象和数组语法写法。由于直接写一长串样式不便于阅读和维护，所以一般写在data或者computed里。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<div :style="styles">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
styles: {
color: 'red',
fontSize: '14px'
}
}
});
</script>
</body> </html>
使用;style时vuejs会自动添加前缀。
VUE v-bind绑定class和style的更多相关文章
- vue.js之绑定class和style
一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></di ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- Vue(三) v-bind 及 class 与 style 绑定
DOM 元素经常会动态绑定一些 class 类名 或 style 样式,现在介绍使用 v-bind 指令来绑定 class 和 style 的多种方法. 了解 v-bind 指令 在之前已经介绍了指令 ...
- vue通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style绑定书写 <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 第11课 std::bind和std::function（2）_std::bind绑定器
1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...
- vue的样式绑定
vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...
- Vue 将样式绑定到一个对象让模板更清晰
Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...
随机推荐
- RedisDesktopManager-0.9.3 for windows (转）
redis数据库的可视化工具 官方出了RedisDesktopManager-0.9.8版本后要购买了.之前自用的Windows版本0.9.3.817有需要的可以使用.解压直接启动即可.主要以备自用! ...
- devops basic
- 图灵杯 E 简单的RMQ（UVA 11235）（RMQ）
E: 简单的RMQ 时间限制: 2 Sec 内存限制: 64 MB提交: 934 解决: 165[提交][状态][讨论版] 题目描述 给定一个数组,其中的元素满足非递减顺序.任意给定一个区间[i, ...
- HZAU 1199 Little Red Riding Hood（DP）
Little Red Riding Hood Time Limit: 1 Sec Memory Limit: 1280 MBSubmit: 853 Solved: 129[Submit][Stat ...
- curator管理es索引
安装curator------------------rpm --import https://packages.elastic.co/GPG-KEY-elasticsearch vi /etc/yu ...
- shell 指定行插入
#如果知道行号可以用下面的方法 sed -i '88 r b.file' a.file #在a.txt的第88行插入文件b.txt awk '1;NR==88{system("cat ...
- Xamarin Android真机测试报错
Xamarin Android真机测试报错 Xamarin Android真机测试报错,错误信息为INSTALL_CANCELLED_BY_USER.出现这个错误,通常都是真机上开发者选项设置错误 ...
- Visual Studio 2017创建XAML文件
Visual Studio 2017创建XAML文件 在Visual Stuido 2015中,在已经创建好的项目中添加XAML文件,只要右击项目,单击“添加”|“新建项”命令,然后从“添加新项” ...
- [BZOJ1494]生成树计数
[BZOJ1494] [NOI2007]生成树计数 Description 最近,小栋在无向连通图的生成树个数计算方面有了惊人的进展,他发现:·n个结点的环的生成树个数为n.·n个结点的完全图的生成树 ...
- django, form.errors处理
from.errors其实就是一个字典, 可以利用for error in form.errors.values, 或者for key, value in form.errors遍历得到其中的数据