vuejs3

7.v-on:事件类型，或者键盘字符，键盘码
 <button v-on:click="jiafen">加分</button>
    <!--执行减法函数-->
    <button @click="jianfen">减分</button>//绑定点击事件执行jianfen函数
    <input type="text" v-on:keyup.enter="onEnter"  v-model="fenshu2">//绑定enter键放下，v-model绑定数据，实时响应（占用的是同一个空间）
  var app = new Vue({
//        节点的id
        el:'#app',
        data:{
           isLogin:false,
           fenshu:0,
           fenshu2:1
        },
        methods:{
            jiafen:function () {
                this.fenshu++;
            },
            jianfen:function () {
                this.fenshu--;
            },
            onEnter:function () {
                this.fenshu=parseInt(this.fenshu)+parseInt(this.fenshu2);
            }
        }


    })
8.v-model:绑定所以数据，v-model.lazy:独立绑定 ，但是如果它改变不会影响其他值，如果其它改变会影响他的值，v-model.number:只绑定数字，v-model.trim:去掉开始的空格，
<button @click="jianfen">减分</button>
    <p>v-model:<input type="text"  v-model="fenshu2"></p>
    <p>v-model.lazy:<input type="text"  v-model.lazy="fenshu2"></p>
    <p> v-model.number:<input type="text"  v-model.number="fenshu2"></p>
    <p> v-model.trim:<input type="text"  v-model.trim="fenshu2"></p>
    <hr>
    <h3> 文本域 </h3>
    <textarea cols="30" rows="5" v-model="fenshu2"></textarea>
    <h3> 多选框</h3>
    <input type="checkbox" v-model="islogin" value="1">{{islogin}}
    <input type="checkbox" v-model="islogin" value="2">{{islogin}}
    <input type="checkbox" v-model="islogin" value="3">{{islogin}}
 var app = new Vue({
//        节点的id
        el:'#app',
        data:{
           isLogin:false,
           fenshu:0,
           fenshu2:12345123,
           islogin:1
        },
        methods:{
            jiafen:function () {
                this.fenshu++;
            },
            jianfen:function () {
                this.fenshu--;
            },
            onEnter:function () {
                this.fenshu=parseInt(this.fenshu)+parseInt(this.fenshu2);
            }
        }


    })