vue的數據綁定和列表渲染的造輪子

GitHub:八至

作者：狐貍家的魚

?

雙向數據綁定

Vue中數據的雙向綁定-v-model

數據->頁面

頁面->數據

適用：input、select、textarea

<div id="app"><!-- 數據輸入 --><input type="text" v-model="message" ><!-- 控制顯示狀態 --><input type="checkbox" v-model="checked"><!-- 顯示狀態 --><label for="checkbox">{{checked}}</label><!-- 頁面顯示 --><p v-show="checked">{{message}}</p></div> var message = 'sue';var vm = new Vue({el:'#app',data:{message,checked:true}})

這是一個簡單的表單輸入雙向數據綁定，輸入框中輸入數據，會顯示在頁面，更改頁面顯示數據，也會改變輸入框中的數據。

單選框控制頁面顯示狀態，true-顯示，false-隱藏

當更改輸入框中數據時，頁面顯示也會同時改變

整個操作過程如下：

?

更改頁面數據時，輸入框的數據也會改變，在控制臺改寫數據：

操作過程如下：

?列表渲染

列表渲染指令 v-for

語法：1.v-for='item,index in arr'

　　　2.v-for='value,key,index in object'

1. v-for='item,index in arr'

?（1）把一個數組對應為一組元素進行渲染

<div id="app"><ul><li v-for="item,index in list" :key="item.id">{{index}}.{{item}}</li></ul> </div>

?

var vm = new Vue({el:'#app',data:{list:['狐貍家的魚','魚家的狐貍','炸炸']}})

（2）數組的響應式數據變化

Vue提供觀察數組的變異方法，會觸發視圖更新，主要有以下方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

例如追加數組元素，可以這樣寫：

vm.list.push(1000);

改變數組元素值，不可以直接用map方法，它不會改變原數組：

//不會改變原數組 vm.list.map(item =>item*3);

要改成這樣：

//可以改變 vm.list = vm.list.map(item =>item*3);

注意！Vue 不能檢測以下變動的數組：

• 通過數組下標改變值：vm.list[0] = '修改元素值'
• 通過數組length改變數組長度：vm.list.length = 1;

可以通過以下方法改成響應式的：

//通過數組下標改變數組元素值可以這樣寫 vm.list.splice(0,1,'sue'); //修改數組長度這樣寫 vm.list.splice(newLength);

?

2. v-for='value,key,index in object'

?（1）通過一個對象的屬性來迭代渲染

<div id="app"><li v-for='value,key,index in obj'>{{value}}--{{key}}--{{index}}</li></ul> </div> var vm = new Vue({el:'#app',data:{obj:{a:1,b:2,c:3}}})

（2）對象的響應式數據變化

注意！Vue 不能檢測對象屬性的添加或刪除

可以使用以下方法：

• 調用靜態方法：Vue.set(object, key, value)?方法向嵌套對象添加響應式屬性
• 調用實例方法$set，比如：vm.$set(vm.obj,'ke','我是新增的');

?

條件判斷

條件判斷指令

1.v-if

語法：v-if="表達式"

根據表達式的值的真假條件渲染元素和移除元素

2.v-show

語法：v-show="表達式"

根據表達式的值的真假條件，切換元素的css屬性和display屬性

<div id="app"><input type="checkbox" v-model="checked"><p v-if="checked">{{checked}}</p><p v-show="checked">{{checked}}</p></div> let vm = new Vue({el:'#app',data:{checked:true}})

結合數據綁定、列表渲染、條件判斷造的輪子—表格登記

其他輪子稱為留言板，我覺得更像表格登記，(●ˇ?ˇ●)

全部代碼：

<div class="container" id="box"><form role="form" ><div class="form-group"><label for="username" class="h5">用戶名：</label><input v-model="username" id="username" class="form-control" placeholder="輸入用戶名" type="text"></div><div class="form-group"><label for="age" class="h5">年齡：</label><input v-model="age" id="age" class="form-control" placeholder="輸入年齡" type="text"></div><div class="form-group"><label for="classroom" class="h5">班級：</label><input v-model="classroom" id="classroom" class="form-control" placeholder="輸入班級" type="text"></div><div class="form-group"><input value="添加" v-on:click="add" class="btn btn-primary" type="button"><input value="重置" v-on:click="clearInput" class="btn btn-danger" type="button"></div></form><!-- 分割線 --><hr><table class="table table-bordered table-hover"><caption class="h3 text-info text-center">用戶信息表</caption><tr class="text-info"><th class="text-center">序號</th><th class="text-center">用戶名</th><th class="text-center">年齡</th><th class="text-center">班級</th><th class="text-center">操作</th></tr><tr class="text-center" v-for="(item,index) in myData" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.classroom}}</td><td><input type="button" value="刪除" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="currentIndex=index"></td></tr><tr v-show="myData.length!=0"><td colspan='5' class="text-center"><button class="btn btn-danger btn-sm" v-on:click="deleteAll">刪除全部</button></td></tr><tr v-show="myData.length == 0"><td colspan='5' class="text-center text-muted"><p>暫無數據...</p></td></tr></table><div role="dialog" class="modal" id="layer"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" data-dismiss="moadl"><span></span></button><h4 class="modal-title">確認要刪除此行數據嗎</h4></div><div class="modal-body text-right"><button class="btn btn-primary" data-dismiss="modal">取消</button><button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteItem(currentIndex)">確認</button></div></div></div></div></div><script>new Vue({el:'#box',data:{myData:[],username:"",age:"",classroom:"",currentIndex:""},methods: {add:function(){this.myData.push({name:this.username,age:this.age,classroom:this.classroom});this.username = '';this.age = '';this.classroom = '';},clearInput:function(){//清空輸入 重置this.username = '';this.age = '';this.classroom = '';},deleteItem:function(index){this.myData.splice(index,1);//刪除當前行數據 },deleteAll:function(){this.myData = [];//清空所有數據 }}});</script>

?

轉載于:https://www.cnblogs.com/suRimn/p/10263227.html

總結

以上是生活随笔為你收集整理的vue学习笔记（二）- 数据绑定、列表渲染、条件判断的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。