(尚007)Vue强制绑定class和style
注意:class和style的值是动态的值
1.test007.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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'}"
其中activeColor/fontSize是data属性
-->
<div id="demo">
<h2>1.class绑定: :class='xxx'</h2>
<p class="cClass" :class="a">xxx是字符串</p>
<!--属性名是类名,值是布尔值;true类名留下来,false类名不留-->
<!--<p :class="{aClass:true,bClass:false}">xxx是对象</p>-->
<!--:class="{aClass:isA,bClass:isB}"动态绑定-->
<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 text="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#demo',
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>
2.浏览器打开
点击更新按钮后:
厉害了!!!
(尚007)Vue强制绑定class和style的更多相关文章
- VUE v-bind绑定class和style
1.绑定class (1)对象语法 <!DOCTYPE html> <html lang="zh"> <head> <meta chars ...
- vue强制绑定css3的缩放效果transfrom:scale()
vue不提供 transfrom:scale(1.5) : 会报错 ,错误是 "TypeError: _vm.scale is not a function": 原因:Vue将其 ...
- Vue 样式绑定 && 条件渲染
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- VUE：class与style强制绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue.js之绑定class和style
一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></di ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- (尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...
- vue双向绑定的原理及实现双向绑定MVVM源码分析
vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...
- vue样式绑定
vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象 ...
随机推荐
- Mysql中HAVING的相关使用方法
having字句可以让我们筛选分组之后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句前. 而having子句在聚合后对组记录进行筛选.我的理解就是真实表 ...
- OAuth2实现原理
现在开放平台非常流行,例如微信开放平台.微博开放平台等,开放平台都涉及用户授权问题,OAuth2就是目前的主流授权解决方案 OAuth2是什么 OAuth(Open Authorization,开放授 ...
- Spark 系列（十二）—— Spark SQL JOIN 操作
一. 数据准备 本文主要介绍 Spark SQL 的多表连接,需要预先准备测试数据.分别创建员工和部门的 Datafame,并注册为临时视图,代码如下: val spark = SparkSessio ...
- JavaScript是单线程还是多线程（转）
多线程要考虑线程之间的资源抢占,死锁,冲突之类一系列问题.JavaScript作为一门客户端脚本,貌似没有多线程的一些列问题.那么JavaScript是单线程还是多线程?通过查资料总结了JavaScr ...
- PHP写入文件
file_put_contents('log.txt',PHP_EOL.'zhangsan'.$time.'查看了数据', FILE_APPEND);
- 规格化设计——OO第三单元总结
规格化设计--OO第三单元总结 一.JML语言理论基础.应用工具链 1.1 JML语言 JML(java modeling language)是一种描述代码行为的语言,包括前置条件.副作用等等.J ...
- Part_three:Redis持久化存储
redis持久化存储 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失,为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. 1.RD ...
- mybatis异常：nested exception is org.apache.ibatis.builder.BuilderException: Error resolving JdbcType
异常详细 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.builder.Builde ...
- Jmeter学习笔记（十六）——HTTP请求之content-type
一.HTTP请求Content-Type 常见的媒体格式类型如下: text/html : HTML格式 text/plain :纯文本格式 text/xml : XML格式 image/gif :g ...
- eslint校验——开启服务后自动校验
"[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode&q ...