vue學習筆記（二）- 數據綁定、列表渲染、條件判斷

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>