vueclass
2024-10-06 12:40:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bgBlue{
background: skyblue;
}
.bgPink{
background: pink;
}
.div1{
width: 300px;
height: 300px;
margin: 0 auto;
}
#div1{
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="color"> </div>
<button @click='changeColor'>更改颜色</button>
<hr />
<div :class="color2"> </div>
<button @click='changeColor2'>更改颜色</button> <hr /> <div :class="color3"> </div>
<button @click='changeColor3'>更改颜色</button> <hr /> <div :class="['div1',divBG]"> </div>
<button @click='changeColor4'>更改颜色</button> <hr /> <!--
vue给class属性专门定制了绑定的方式,那么不会删除默认class里面的值,而是进行添加的方式,将绑定变量里面的值放入class
-->
<div data-key='123' :data-key='msg' class="123" :class="['div1',{bgPink:!isBlue},{bgBlue:isBlue}]"> </div>
<button @click='changeColor5'>更改颜色</button> </div>
<script type="text/javascript"> var app = new Vue({
el:'#app',
data:{
color:'div1 bgBlue',
color2:{
div1:true,
bgBlue:true,
bgPink:false
},
color3:[ 'div1','bgBlue' ],
divBG:'bgBlue',
isBlue:true,
msg:'hello'
},
methods:{
changeColor:function(){
this.color = 'div1 bgPink'
},
changeColor2:function(){
this.color2 = {
div1:true,
bgBlue:false,
bgPink:true
}
},
changeColor3:function(){
this.color3 = ['div1','bgPink']
//新建了1个数组,将老的内存地址覆盖掉
//this.color3[1] = 'bgPink',因为这样并没有更改掉color3内存地址没有更改掉,所以不会触发视图的更新
//this.$set(this.color3,1,'bgPink')
},
changeColor4:function(){
this.divBG = 'bgPink'
},
changeColor5:function(){
this.isBlue = false
}
}
}) </script>
<!--
1、class属性绑定变量,变量是相对应的classname的字符串
2、使用对象的方式来绑定class,根据对象里的属性值是否是true,来决定这个属性是否添加进class
3、数组的形式
-->
</body>
</html>
最新文章
- MyBatis的mapper
- 使用crypto模块实现md5加密功能(解决中文加密前后端不一致的问题)
- shellinabox基于web浏览器的终端模拟器
- 【经验】Maven Tomcat8+ 实现自动化部署
- SPSS数据分析—非参数检验
- MATLAB 图像处理——Contrast Enhancement Techniques
- 转:设置session过期时间
- 【HDOJ】4326 Game
- C# 图形普通处理,resize ,水印..
- Centos系统下Lamp环境的快速搭建(超详细)
- Fibonacci数列使用迭代器实现
- 冲刺博客NO.7
- (4) MySQL中EXPLAIN执行计划分析
- C#开发邮件收发(同步)
- 大白话说Java泛型:入门、使用、原理
- Spring Boot 集成Shiro和CAS
- VS2010自带的性能分析工具分析.NET程序的性能
- CentOS 7 mini安装后安装图形界面及远程设置
- mysql 使用存储引擎
- rsync 目录以 / 结尾 轻松同步数据