Vue串列渲染
v-for指令
計算屬性
偵聽屬性
v-for指令
1. v-for指令的使用
v-for指令需要使用“ item in items ”形式的特殊語法，items 是源資料陣列，item 是被迭代陣列的元素的別名，為了給Vue一個提示，以便它能跟蹤每一行資料，從而重用和重新排序現有元素，v-for 指令需要為每一項提供一個唯一 key 屬性，
2. 樣例 Demo1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in items":key="index">
<a href="">{{index}}.{{item}}</a>
</li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
items:[
"員工部門","專案助理","員工管理"
]
}
})
</script>
</body>
</html>
3. 樣例 Demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="soild 1px black">
<thead>
<td>序號</td>
<td>姓名</td>
<td>年齡</td>
</thead>
<tbody>
<tr v-for="(item,index) in items":key="index.id">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[{
id:1,name:"張三",age:18
},{
id:2,name:"柳柳",age:20
},{
id:3,name:"王五",age:19
}]
}
})
</script>
</body>
</html>
計算屬性
1. 計算屬性
Vue.js 提供了計算屬性的方法，在計算屬性里可以完成各種復雜的邏輯，包括運算，函式呼叫等，最侄訓回傳結果，計算屬性還可以依賴多個Vue實體的資料，只要其中任一資料發生變化，計算屬性就會重新執行，視圖也會更新，所有的計算屬性都以函式的形式寫在Vue實體內的 computed 選項中，最侄訓傳計算后的結果，
2. 樣例 Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原字串：{{message}}</p>
<p>字串轉換后：{{reversedMessage}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"The hunter who tracks the deer can't see the mountain."
},
computed:{
reversedMessage:function(){
return this.message.split("").reverse().join("");
}
}
})
</script>
</body>
</html>
偵聽屬性
1.偵聽屬性
當有一些資料需要隨著其他資料的變動而變動時，就可以使用偵聽屬性watch，watch是一個物件，其中watch物件的屬性是需要偵聽的目標，一般data中的某個資料項，而watch物件的屬性值是一個函式，是當被偵聽的資料項發生變化時需要執行的函式，這個函式有兩個形參：第一個值：當前值；第二個值：更新后的值，
2. 樣例 Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>員工資訊</h1>
<p>
<label for="name">姓名：</label>
<input type="text" v-model="name"/>
<span>{{nameTip}}</span>
</p>
<p>
<label for="emile">郵箱：</label>
<input type="text" v-model="emile"/>
<span>{{emileTip}}</span>
</p>
<p>
<label for="phone">電話：</label>
<input type="text" v-model="phone"/>
<span>{{phoneTip}}</span>
</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
name:"",
emile:"",
phone:"",
nameTip:"",
emileTip:"",
phoneTip:""
},
watch:{
name:function(newVal){
if(newVal!=""){
this.nameTip="姓名輸入正確";
}else{
this.nameTip="姓名不能為空"
}
},
emile:function(newVal){
if(newVal!=""){
this.emileTip="郵箱輸入正確";
}else{
this.emileTip="郵箱不能為空"
}
},
phone:function(newVal){
if(newVal!=""){
this.phoneTip="電話輸入正確";
}else{
this.phoneTip="電話不能為空"
}
}
}
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252153.html
標籤：其他
上一篇：SpringMVC中RequestMapping注解【作用、出現的位置、屬性】
下一篇：gis開發用什么框架好？