首页 > 代码库 > 第二节:指令的使用(2)

第二节:指令的使用(2)

1、v-else 必须跟着v-if 或者 v-show 一起使用 ,充当else的作用。

<div id="example">
         <p v-if="ok">男人</p>
         <p v-else="ok">女人</p>
</div>
<script>
  new Vue({
    el:"#example",
    data:{
      ok:ture
    }
  });

</script>

 2、v-model 用来在input ,select , text, checkbox,radio等表单标签控件上创建双向数据绑定。

 

<form>
        姓名:<input type="text" v-model="data.name" placeholder="" /><br />
        性别:<input type="radio" id="man" value="one" v-model="data.sex" />
                <lable for="man"></lable>
                <input type="radio" id="male" value="two" v-model="data.sex" />
                <lable for="male"></lable>
                <input type="radio" id="noman" value="three" v-model="data.sex" />
                <lable for="noman">隐私</lable><br />
        兴趣:<input type="checkbox" id ="book" value="book" v-model="data.interest" />
                <label for="book">阅读</label>
                <input type="checkbox" id ="swim" value="swim" v-model="data.interest" />
                <label for="swim">游泳</label>
                <input type="checkbox" id ="game" value="game" v-model="data.interest" />
                <label for="game">游戏</label>
                <input type="checkbox" id ="song" value="song" v-model="data.interest" />
                <label for="song">唱歌</label><br />
        身份:<select v-model="data.identity">
                <option value="teacher">教师</option>
                <option value="doctor">医生</option>
                <option value="lawyer">律师</option>
             </select>
</form>

<script>
  new Vue({
    el:"#example",
    data:{
      data:{
        name:"1",
        sex:"one",
        interest:["book","song"],
        identity:"teacher"
      }
    
}
  });
</script>
 

 

  注意: 在表单控件赋默认值的时候,如果你想这样:<input type="checkbox" id ="book" value="http://www.mamicode.com/book" v-model="data.interest" selected/>

     那么你在data.interest中也必须有“book”的值。html中标签的默认值必须在Vue模版中的默认值之中,因为在v-model进行的是双向的数据绑定。

3、v-model 可以添加多个参数:number、lazy、debounce

  • number 将用户输入的值自动转换成Number类型,如果原值转换结果为NaN,则返回原值。
  • lazy 将input的数据改变发生到change事件中,不添加默认是同步改变的。
  • debounce 设置最小的延时,用户输入数据的时候,同步数据的延时。(如果进行高消耗的操作比较有用,例如随时发送AJAX请求。)

 

第二节:指令的使用(2)