Vue前端高效開發之列表渲染指令
阿新 • • 發佈：2021-06-28
v-for指令
說起列表不得不提起迴圈，v-for指令便是可以在中實現迴圈的操作。
v-for指令是基於一個數組來重複渲染的指令，通常就用於顯示列表和表格。
語法：
<ul v-for="(鍵,值,索引) in 陣列">
<li>{{索引}}:{{值}}:{{鍵}}</li>
</ul>
例：
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
</style>
<!--遍歷資料-->
<div id="app">
<!--item：鍵-->
<!--value：值-->
<!--index：下標-->
<ul v-for="(item,value,index) in people">
<li>{{index}}:{{value}}:{{item}}</li>
</ul>
</div>
<script src="/Vue.js"></script>
<script>
new Vue({
el: "#app",data: {
text: "我們的征途是星辰大海！",arr: ["瑪卡巴卡","唔西迪西","小點點","湯姆布利多","叮叮車"],people: {
id: 1,name: "周潤發",age: 65
}
}
})
</s
由例子可以看出，v-for指令不僅可以遍歷字串，陣列，還可以遍歷物件型別，根據鍵值和索引，以列表或者表格形式顯示。
計算屬性
一般在項目開發中，資料往往需要經過一些處理，除了利用基本的表示式和過濾器外，還可以使用vue的計算屬性，優化程式以及完成複雜計算。
例：實現模糊篩選以及增加和刪除。
首先通過v-for語句實現表格顯示資料
<table class="table table-hover table-border">
<tr class="info">
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>介紹</th>
</tr>
<tr v-for="item in lists">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age+"歲"}}</td>
<td>{{item.show}}</td>
</tr>
</table>
<script>
new Vue({
el: "#app",data: {
"lists": [{
"id": 1,"name": "張三","age": 18,"show": "張三介紹"
},{
"id": 2,"name": "李四","age": 19,"show": "李四介紹"
},{
"id": 3,"name": "王五","age": 20,"show": "王五介紹"
},{
"id": 4,"name": "趙六","age": 21,"show": "趙六介紹"
},{
"id": 5,"name": "孫八","age": 22,"show": "孫八介紹"
}]
}
</script>
使用計算屬性實現模糊查詢
<p><input type="text" v-model="selectkey" placeholder="請輸入"></p>
computed: {
newlist: function() {
var _this = this;
return _this.lists.filter(function(val) {
return val.name.indexOf(_this.selectkey) != -1;
})
}
}
把計算屬性以函式形式寫到computed選項中，將v-for語句遍歷的集合改為篩選後的newlist集合，通過判斷字串中是否存在子字串篩選lists集合中的資料，再把篩選後的資料交給v-for遍歷顯示。
實現新增及刪除
<p class="input-group">
<span class="input-group-addon">編號：</span>
<input type="text" v-model="id" placeholder="請輸入編號" class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon">姓名：</span>
<input type="text" v-model="name" placeholder="請輸入姓名" class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon">年齡：</span>
<input type="text" v-modelwww.cppcns.com="age" placeholder="請輸www.cppcns.com入年齡" class="form-control">
</p>
<p class="input-group">
<span class="input-group-addon">資訊：</span>
<input type="text" v-model="show" placeholder="請輸入資訊" class="form-control">
</p>
<p class="input-group">
<button @click="add()" class="btn btn-primary">新增資訊</button>
</p>
<td> <button v-on:click="dels(item.id)" class="btn btn-primary">刪除</button> </tAOOKwGd>
methods: {
add: function() {
var girl = {
"id": this.id,"name": this.name,"age": this.age,"show": this.show
}
this.lists.push(girl);
},dels: function(o) {
//刪除的是下標，刪除幾個
for (let i = 0; i < this.lists.length; i++) {
if (this.lists[i].id == o) {
this.lists.splice(i,1);
}
}
}
}
通過methods繫結事件，新增兩個按鈕事件方法add和dels用於處理新增和刪除操作。
新增就是使用push方法新增，刪除這裡的splice方法僅能通過下標刪除，而傳過來的值是id所以這裡為了確保正確性就需要迴圈判斷下標，進行刪除操作。
這就是計算屬性。用於處理資料。
監聽屬性
vue除了計算屬性還提供了監聽屬性用於處理資料，用於觀察資料變動。
不同的是監聽屬性需要有兩個形參，一個是當前值，一個是更新後的值。
例：
watch: {
first: function (val) {
this.full = val + ' ' + this.last
},last: function (val) {
this.full = this.first + ' ' + val
}
}
相比於監聽屬性，明顯計算屬性會優於監聽屬性，所以在非特殊情況下，還是推薦優先使用計算屬性。
總結
到此這篇關於Vue前端高效開發之列表渲染指令的文章就介紹到這了,更多相關Vue列表渲染內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！