文章目录
一、绑定Class
<style>
.active{
border: 1px solid red;
width: 100px;
height: 100px;
}
.error{
background-color: orange;
}
.test{
font-size:76px;
}
</style>
<body>
<div id="app">
<div v-bind:class="{active:isActive,error: isError}">测试样式1</div>
<div v-bind:class='classStr'>测试样式2</div>
<div v-bind:class='classArr'>测试样式3</div>
<div v-bind:class="['active','error'，{test:isTest}]">测试样式4</div>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
// 1
isActive:'true',
isError:'true',
// 2
classStr:'active error',
// 3
classArr:['active','error'],
//4数组里边可以直接绑定class
isTest:'false',
},
});
</script>
</body>
效果：
二、绑定Style
<div id="app">
<div v-bind:style='{border:borderStyle,width:widthStyle,height:heightStyle}'></div>
<div :style='{"color":"red","font-size":"30px"}'>对象语法</div>
<div :style='objStyles'></div>
<div :style='[objStyles,overrideStyles]'></div>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
//1
borderStyle:'1px solid blue',
widthStyle:'100px',
heightStyle:'200px',
//2
objStyles:{
border:'1px solid green',
width:'200px',
height:'100px'
},
//3
overrideStyles:{
border:'5px solid orange',
backgroundColor:'blue',
}
}
});
</script>
三、选择结构与循环结构
3.1 选择结构 v-if
注意：
因为v-show总是会渲染，而只是控制display为none还是显示 。
因此会造成不必要的资源浪费。
3.1.1 实例：根据成绩显示对应评语
<div id="app">
<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>比较差</div>
<div v-show='flag'>测试v-show</div>
<button v-on:click='handle'>点击</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
score:50,
flag:false
},
methods:{
handle:function(){
this.flag = !this.flag
}
}
});
</script>
效果“
3.1.2 实例：随机数大于0.5显示
<div id="app">
<h2 v-text='value'></h2>
<p v-if='value>0.5'>显示的</p>
<p v-else>隐藏的</p>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
value:Math.random()
}
});
</script>
效果：
3.2 循环结构 v-for
3.2.1循环数组、对象数组
<div id="app">
<div>水果列表</div>
<ul>
<p>循环数组</p>
<li v-for='item in fruits'>{{item}}</li>
<p>循环数组并且输出索引</p>
<li v-for='(item,index) in fruits'>{{item + '---' + index}}</li>
<p>循环对象数组</p>
<li :key='item.id' v-for='(item,index) in myFruits'>
<span>index：{{index}}</span>
<span>---</span>
<span>ename：{{item.ename}}</span>
<span>---</span>
<span>cname：{{item.cname}}</span>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
fruits:['apple','orange','banana'],
// 注意：这是对象数组
myFruits:[{
id:1,
ename:'apple',
cname:'苹果'
},{
id:2,
ename:'orange',
cname:'橘子'
},{
id:3,
ename:'banana',
cname:'香蕉'
}]
}
});
</script>
效果：
3.3 v-if和v-for结合使用
<div id="app">
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v+'------'+k+'------'+i}}</div>
</div>
<script>
let vm =new Vue({
el:"#app",
data:{
obj:{
uname:'zhangsan',
age:'13',
gender:'female'
}
}
});
</script>
效果：
3.3.1 实例：输出未报到的学生
<div id="app">
<strong>没有报道的学生名单:</strong>
<ul>
<!-- 对象数组形式 -->
<li v-if='value.state == "" ' v-for='(value,key) in studentArrObj'>
<span>{{value.name}}</span>
</li>
<!-- 二维数组形式 -->
<br>
<li v-if='value[1] == "" ' v-for='(value,key) in studentArr'>
<span>{{value[0]}}</span>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
studentArr:[['小明',''],['小红','已报到'],['小华','已报到'],['小思','']],
studentArrObj:[{
name:'小明',
state:''
},{
name:'小红',
state:'已报到'
},{
name:'小华',
state:'已报到'
},{
name:'小思',
state:''
}],
}
})
</script>
效果：
