class中的对象和数组语法
style中的对象和数组语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.active{
border: 3px solid red;
width: 200px;
height: 200px;
}
.error{
background-color: aqua;
}
</style>
</head>
<body>
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<!-- class样式处理 -->
<!-- 对象语法 -->
<div v-bind:class="{active:isactive, error:iserror}">
测试内容1
</div>
<button v-on:click="handle">切换1</button>
<!-- 数组语法 -->
<div v-bind:class="[activeClass, errorClass]">
测试内容2
</div>
<button v-on:click="handle1">切换2</button>
<!-- style样式语法 -->
<div v-bind:style="{color:'red',border:'3px solid', width:'200px', height:'200px'}">
测试内容3
</div>
<button v-on:click="handle2">切换3</button>
<!-- 对象语法 -->
<div v-bind:style="{color:colorstyle,border:borderstyle}">
测试内容4
</div>
<button v-on:click="handle2">切换4</button>
<!-- 数组语法 -->
<div v-bind:style="[widthstyle, heightstyle]">
测试内容5
</div>
<button v-on:click="handle3">切换5</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isactive:true,
iserror:true,
activeClass:'active',
errorClass:'error',
colorstyle:"blue",
borderstyle:"3px solid green",
widthstyle:{
width:"300px",
border:"3px solid red",
background:"yellow"
},
heightstyle:{
height:"400px"
}
},
methods: {
handle:function(){
this.isactive =! this.isactive;
this.iserror =! this.iserror;
},
handle1:function(){
this.activeClass ="";
// this.errorClass ="";
},
handle2:function(){
},
handle3:function(){
//点击将高度切换为100px
this.heightstyle.height="100px";
}
}
})
</script>
</body>
</html>
v-if v-else-if v-else
v-show
v-for
v-if v-for的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<!-- v-if v-else-if v-else不成立不会渲染 -->
<div v-if="score>=90">优秀</div>
<div v-else-if="score<90 && score>=80">良好</div>
<div v-else-if="score<80 && score>=60">一般</div>
<div v-else="score<60">差</div>
<!-- v-show 不成立渲染但是不展示到页面 相当于隐藏 -->
<div v-show="flag">测试</div>
<button v-on:click="handle">切换</button>
<ul>
<!-- 遍历对象item的值 可以任意取 -->
<li v-for="item in fruit">{{ item }}</li><br>
<!-- index下角标 遍历数组-->
<li v-for="(item,index) in fruit">{{ item+"---"+index }}</li><br>
<!-- :key可以提高vue的性能 遍历对象的具体内容-->
<li :key="item.id" v-for="(item,index) in myfruit">
<span>{{ item.ename }}</span>
<span>{{ item.cname }}</span>
<span>{{ index }}</span>
</li><br>
<!-- 遍历对象 v值 k键 i下角标(都可以自定义) 可以加v-if进行筛选-->
<li v-for="(value, key, index) in obj">{{ value+"----"+key+"----"+index }}</li><br>
<!-- 遍历对象 v值为20 k键 i下角标(都可以自定义)-->
<li v-if="value==20" v-for="(value, key, index) in obj">{{ value+"----"+key+"----"+index }}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
score:20,
flag:false,
fruit:["apple","orange","banana"],
myfruit:[{
id:"1",
ename:"apple",
cname:"苹果"
},{
id:"2",
ename:"orange",
cname:"橘子"
},{
id:"3",
ename:"banana",
cname:"香蕉"
}],
obj:{
name:'zhf',
age:'20',
sex:"男"
}
},
methods: {
handle:function(){
this.flag =! this.flag;
}
}
})
</script>
</body>
</html>