Vue.js watch 示例代码，用于表单的校验

代码如下： 

<template>
 <div id="app">
  <div id = "computed_props">
         手机号 : <input type = "text" v-model = "phone"> <span>{{tip}}</span>
         
 </div>
</div>
</template>

<script>
export default {
  data () {
    return {
     phone : '',
     tip:''
    }
    
  },
  onload:{
       

   },
   watch : {
               phone:function(val) {
                 var  el=val.trim();
                 if(el.length!=14){
                    this.tip='手机格式不正确';
                 }
                 else{
                   this.tip=''
                 }

               }
              
     }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
/* 定义提示框的基础样式 */
    .msg{
      display:inline-block;
      width:160px;
      height:25px;
      border:1px solid #555;
      text-align:center;
      line-height:25px;
    }
    /* 定义提示框在验证通过时的样式 */
    .success{
      border:1px solid green;
      background-color:lightgreen;
      color:green
    }
    /* 定义提示框在验证失败时的样式 */
    .fail{
      border:1px solid red;
      background-color:pink;
      color:red
    }
</style>

效果如下：