vue中簡單的小插曲

我們現在來學習一下vue中一些簡單的小東西：

首先我們必須要引入vue.js文件哦！

1.有關文本框里的checkbox

js代碼：

new Vue({
                el:"#app",
                data:{
                    mag:" "
                }
            })

html代碼：

<div id="app">
        <input type="checkbox" v-model="mag">
        <h1>{{mag}}</h1>
    </div>

這樣checked的屬性值就可以顯示到頁面上了，我們可以利用它寫顯示隱藏的小案例。

2.vue中的迴圈遍歷：

js代碼：

  var app = new Vue({
        el: '#app',
        data: {
            arr:[1,2,3,4,5,6,4]
        }
    })

html代碼：

<div id="app">
    <ul>
        <li v-for="item in arr">
            {{ item }} {{$index}}
        </li>
    </ul>
</div>

這樣我們就可以來迴圈遍曆數組中的值了，json 同理，這個方法中同樣中包含著$Index,但與angular不同的是沒有$odd,$event,$first,$last等。

3.我們下麵來做一個簡單留言板的小例子

js代碼：

 var app = new Vue({
        el: '#app',
        data: {
            arr:[]
        },
        methods:{
            add:function () {
                this.arr.push(this.a);
                this.a=""
            },
            remove:function (index) {
                this.arr.splice(index,1)
            }
        }
    })

html代碼：

<div id="app">
    <input type="text" v-model="a">
    <input type="button" @click="add()" value="按鈕" >
    <div v-show="this.arr.length==0">暫無留言</div>
    <ul>
        <li v-for="item in arr">
            {{ item }}
            <a href="javascript:;" @click="remove($index)">刪除</a>
        </li>
    </ul>
</div>

這樣一個簡單的留言板小案例就完成了。

4.下麵我們來看一下非常方便的鍵盤事件

js代碼：

new Vue({
                el: '#div',
                data: {
                    msg: ''
                },
                methods: {
                    enter: function () {
                        alert('enter');
                    },
                    up: function () {
                        alert('up');
                    },
                    down: function () {
                        alert('down');
                    },
                    left: function () {
                        alert('left');
                    },
                    right: function () {
                        alert('right');
                    }
                }
            });

html代碼：

<div id="div">
    <input type="text"
           @keyup.13="enter()"
           @keyup.up="up()"
           @keyup.down="down()"
           @keyup.left="left()"
           @keyup.right="right()"
    >
</div>

這樣鍵盤事件就是這麼簡單的！