第二节：指令的使用

Posted 2020-08-20

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="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请求。）