代码注释清清楚楚，这里不多做解释了，只需引用vue的js即可
一、vue代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js" type="text/javascript"></script>
<style type="text/css">
.active{
border: 5px solid yellow;
width: 200px;
height: 200px;
}
.error{
background-color: aqua;
}
</style>
</head>
<body>
<div id="zpy">
<!--class对象语法测试-->
<div v-bind:class="{active:isactive,error:iserror}">
class对象语法测试
</div>
<button @click="handle1">换回原来样式</button>
<!--class数组语法测试-->
<div v-bind:class="[activeClass,errorClass]">
class数组语法测试
</div>
<button @click="handle2">换回原来样式</button>
<!--style对象语法测试，有两种方法-->
<!--方法一-->
<div v-bind:style="{color:'red',border:'5px solid green',width:'200px',height:'200px'}">
style对象语法测试1
</div>
<button @click="handle3">换回原来样式</button>
<!--方法二-->
<div v-bind:style="{color:styleColor,border:styleBorder}">
style对象语法测试2
</div>
<button @click="handle3">换回原来样式</button>
<!--style数组语法测试-->
<div v-bind:style="[styleWidth,styleHeight]">
style数组语法测试
</div>
<button @click="handle4">换回原来样式</button>
</div>
<script type="text/javascript">
new Vue({
el:"#zpy",
data:{
isactive:true,
iserror:true,
activeClass:"active",
errorClass:"error",
styleColor:'black',
styleBorder:'10px solid orange',
styleWidth:{
width:'400px',
border:'5px solid red',
},
styleHeight:{
height:'200px',
backgroundColor:'pink',
}
},
methods: {
handle1:function(){
this.isactive=!this.isactive;
this.iserror=!this.iserror;
},
handle2:function(){
// this.errorClass=!this.errorClass;
this.errorClass="";
},
handle3:function(){
},
handle4:function(){
this.styleHeight.backgroundColor="";
}
},
})
</script>
</body>
</html>
二、浏览器的页面效果图
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
