vue中简单的小插曲

Posted 2020-09-27 Hero^

我们现在来学习一下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>

这样键盘事件就是这么简单的！