VUE：class与style强制绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.aClass{
color:red;
}
.bClass{
color:blue;
}
.cClass{
font-size: 30px;
}
</style>
</head>
<body>
<!--
1.理解
在应用界面中，某个（些）元素的样式是变化的
class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定：class='xxx'
xxx是字符串
xxx是对象
xxx是数组
3.style绑定
:style="{color: activeColor,fontSize: fontSize+'px'}"
其中activiColor/fontSize是data属性
--> <div id="app">
<h2>1.class绑定：：class='xxx'</h2>
<p class="cClass" :class="a">xxx是字符串</p>
<p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
<p :class="['aClass','cClass']">xxx是数组</p>
<h2>2.style绑定</h2>
<p :style="{color: activeColor,fontSize: fontSize+'px'}">:style="{color: activeColor,fontSize: fontSize+'px'}"</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:"#app",
data:{
a:'aClass',
isA:true,
isB:false,
activeColor:'red',
fontSize:20
},
methods:{
update(){
this.a='bClass',
this.isA=false,
this.isB=true,
this.activeColor='green';
this.fontSize=30
}
}
})
</script>
</body>
</html>
VUE：class与style强制绑定的更多相关文章
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue 如何在循环中绑定v-model
vue 如何在循环中绑定v-model 我现在有这么一个需求,页面上有多项输入框,但是具体有多少项,我也不知道,它是通过"新增一项"按钮点击事件,点击一下,就新增一项:如下图这个样 ...
- 前端框架之Vue(8)-表单输入绑定
基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...
- 手写vue中v-bind:style效果的自定义指令
自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到 ...
- vue中v-model 数据双向绑定
表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...
随机推荐
- crontab 设置定时任务
查看当前用户已有的定时任务: crontab -l 编辑crontab: crontab -e 加入需要执行的命令: 0 */4 * * * /www/shwww.net/venv/bin/pytho ...
- query ajax总是进入error回调函数
query ajax总是进入error回调函数今天纠结了1小时,ajax总是进入了error函数中.平时使用从来没有出现过这种现象,纠结了半小时. 最后稍微总结出了点: 1.以前使用都是服务器端输出S ...
- BA--空调静压箱的作用
空调静压箱的主要作用有两个,一个是降低噪音:一个是提高送风距离.工作原理如下:空调出风从空调风机里面出来的时候,具有很大的风速,同时由于空调风机自身的结构原因,空调的出风并不均衡,空气在风管中相互摩擦 ...
- BA-给排水-供水系统自动控制（转载）
浙江省建筑设计研究院划 杨绍胤 杨庆 摘 要:探讨供水系统变流量和恒压自动控制和设计方法.关键词: 供水系统 自动控制 传统给水系统常在屋顶设置高位水箱.水从地下水箱用水泵打到高位水箱.从高位水箱通过 ...
- 非阻塞IO函数
关于效率的优化:
- Codeforces 570D TREE REQUESTS dfs序+树状数组
链接 题解链接:点击打开链接 题意: 给定n个点的树.m个询问 以下n-1个数给出每一个点的父节点,1是root 每一个点有一个字母 以下n个小写字母给出每一个点的字母. 以下m行给出询问: 询问形如 ...
- linux网络启动报错
报错信息: shutting down interface eth0: error:device "eth0" (/org/freedsktop/networkMaager/Dev ...
- MMORPG大型游戏设计与开发（server 游戏场景 事件）
游戏截图 场景事件 一个完整的对象一般都拥有事件,至于什么是事件在这里就不多解释了. 在场景中的事件在天龙/武侠世界中的事件包含场景初始化.场景定时器.场景退出.玩家进入场景.角色升级.角色死亡.角色 ...
- 0x41 并查集
太菜了才做到并查集啊啊啊啊啊啊啊啊啊啊啊 还是很有收获的说 水 bzoj4195: [Noi2015]程序自动分析 好题 poj1456 感受到并查集传递性的美妙啊!对于一个商品,去找他过期前那天的集 ...
- Pocket英语语法---六、感官动词接不同的动词表示什么意思
Pocket英语语法---六.感官动词接不同的动词表示什么意思 一.总结 一句话总结:其实进行时一般是表示连续,动词原形一般表示常态,过去分词一般表示被动(或者完成). 感官动词接原型表示动作的一般情 ...