Vue基礎(四)：模板語法(三)
阿新 • • 發佈：2020-09-04
1. 屬性繫結
Vue要實現動態處理屬性，就需要使用到v-bind指令用法了。
v-bind指令的用法呢就是v-bind:屬性，也可以縮寫成:屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度</a>
<a :href="url">百度1</a>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
執行的效果：
我們先檢視元素，a標籤中的href是指向百度網站的。
這時我們點選百度和百度1，都會跳轉到百度網站，
然後我們回到介面，點選切換按鈕，檢視元素資訊。
此時再點選連結，就跳轉到必應網站了。
這就證明我們繫結屬性成功了。
2. 樣式繫結
2.1 Class繫結
開發中一般是通過控制class屬性來控制css樣式的展示，Vue中樣式繫結一樣是使用v-bind指令。
然而樣式繫結也有兩種方式繫結，分別是物件語法繫結和陣列語法繫結，直接上例子。
物件語法繫結：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue的基本使用</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style> </head> <body> <div id="app"> <div v-bind:class="{active: isActive,error: isError}"> 測試樣式 </div> <button v-on:click='handle'>切換</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 樣式繫結 */ var vm = new Vue({ el: '#app', data: { isActive: true, isError: true }, methods: { handle: function(){ // 控制isActive的值在true和false之間進行切換 this.isActive = !this.isActive; this.isError = !this.isError; } } }); </script> </body> </html>
執行的效果：
點選切換就會去掉盒子，再點選又會出現。
陣列物件繫結：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue的基本使用</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style> </head> <body> <div id="app"> <div v-bind:class='[activeClass, errorClass]'>測試樣式</div> <button v-on:click='handle'>切換</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 樣式繫結 */ var vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error' }, methods: { handle: function(){ this.activeClass = ''; this.errorClass = ''; } } }); </script> </body> </html>
效果和物件語法繫結差不多，就是取消了盒子之後，再點選切換就無效了。
如果你想要像物件語法繫結案例一樣，就要在方法裡面加判斷了，懶得搞。
兩者還能結合使用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue的基本使用</title> <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } .test { color: blue; } .base { font-size: 28px; } </style> </head> <body> <div id="app"> <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>測試樣式</div> <div v-bind:class='arrClasses'></div> <div v-bind:class='objClasses'></div> <div class="base" v-bind:class='objClasses'></div> <button v-on:click='handle'>切換</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 樣式繫結相關語法細節： 1、物件繫結和陣列繫結可以結合使用 2、class繫結的值可以簡化操作 3、預設的class如何處理？預設的class會保留 */ var vm = new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'error', isTest: true, arrClasses: ['active','error'], objClasses: { active: true, error: true } }, methods: { handle: function(){ // this.isTest = false; this.objClasses.error = false; } } }); </script> </body> </html>
執行的效果：
點選切換，下面兩個盒子變成白色。
2.2 style繫結
和class樣式差不多，把class換成style就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
<div v-bind:style='objStyles'></div>
<div v-bind:style='[objStyles, overrideStyles]'></div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
樣式繫結之內聯樣式Style：
*/
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
methods: {
handle: function(){
this.heightStyle = '100px';
this.objStyles.width = '100px';
}
}
});
</script>
</body>
</html>
執行的效果：
可以很明顯的看到盒子縮小了。
3. 分支迴圈結構
3.1 分支結構
if判斷大家總會吧，直接上官網api截圖和案例。
這裡還有一個v-show：
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<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 type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
分支結構
v-show的原理：控制元素樣式是否顯示 display:none
*/
var vm = new Vue({
el: '#app',
data: {
score: 10,
flag: false
},
methods: {
handle: function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
3.2 迴圈結構
v-for遍歷陣列：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
<li :key='item.id' v-for='(item, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
迴圈結構-遍歷陣列
*/
var 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>
</body>
</html>
執行的效果：
v-for遍歷物件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue的基本使用</title>
</head>
<body>
<div id="app">
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 使用原生js遍歷物件
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for(var key in obj) {
console.log(key, obj[key])
}
/*
迴圈結構
*/
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
</script>
</body>
</html>
執行的效果：