文章目錄
一、綁定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>
效果：
