VUE学习日记（十四） ---- 数据绑定v-model（表单：表单修饰符）

 

<div id="myPage">
      <div>
        <label for="username">用户名：</label>
        <!-- v-model.lazy 用户输入内容时不做数据的更新处理，也就是说用户输入完后才会执行onchange事件 -->
        <input type="text" id="username" v-model.lazy="username" @change="checkUsername">
        <span v-if="isokshow">可注册</span>
      </div>
      <br>
      <div>
        <label for="age">年龄：</label>
        <!-- v-model.number 只可输入数值型 -->
        <input type="number" id="age" v-model.number="age"> 
      </div>
      <br>
      <div>
        <label for="content">内容：</label>
        <!-- v-model.trim 自动去除两端空格 -->
        <textarea id="content" v-model.trim="content"></textarea>
      </div>

      <h4>信息展示</h4>
      <p>{{username}}</p>
      <p>{{age}}</p>
      <p>{{content}}</p>



    </div>    

    <script>
      var myPage = new Vue({
        el:'#myPage',
        data:{
          username:"",
          age:"",
          content:"",
          isokshow:false,
        },
        methods:{
          checkUsername:function(){
            if(this.username.length > 0) this.isokshow=true;
            else this.isokshow=false;
          }
        }
          
      })
    </script>

 

效果展示：