v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。书中源码如下：


<template>
<div id="example">
    <p v-if="greeting">Hello</p>
</div>
</template>
<script>
export default {
name:'HelloWorld',
data(){
    return {
   greeting:true
  }
}
}
</script>

我们改变greeting这个字段的值为false,可以看到hello隐藏了起来。

v-show

v-show 指令是根据表达式的值来显示或者隐藏HTML元素。当v-show 赋值为false时，元素将被隐藏。书中代码如下：

<template>
<div id="example">
    <input type="text" v-model="message" placeholder="edit me"/>
    <p v-show="greeting">Hello!</p>
</div>
</template>


<script>
    export default{
        name:'HelloWorld',
        data(){
            return {
                message:'',
                greeting:false
            }
        }
    }
</script>

注：v-if 有更高的切换消耗，而v-show 有更高的初始渲染消耗，因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

v-model

v-model指令用来在input, select, text, checkbox,radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。代码如下：


<template>
    <div id="example">
        <form>
        姓名：
        <input type="text" v-model="data.name" placeholder=""/>
        <br/>
        性别：
        <input type="radio" id="man" value="One" v-model="data.sex"/>
        <label for="man">男</label>
        <input type="radio" id="male" value="Two" v-model="data.sex"/>
        <label for="male">女</label>
        <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" selected>教师</option>
            <option value="doctor">医生</option>
            <option value="lawyer">律师</option>
        </select>
        </form>
    </div>  
</template>

<script>
    export default{
        name:'HelloWorld',
        data(){
            return{
                data:{
                    name:"",
            sex:"",
            interest:[],
            identity:''
                }
            }
        }
    }
</script>

number

如果想将用户的输入自动转换为Number类型（如果原值的转换结果为NaN,则返回原值），则可以添加一个number特性。示例代码如下：

<input type ="number" v-model.number= "msg" />
1
注：书中没有源码

lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到change事件中发生。代码如下：

<template>
<div id="example">
<input type = "text" v-model.lazy ="msg"  />
<br/>
{{msg}}
</div>
</template>


<script>
    export default {
        name:'HelloWorld',
        data(){
            return {
                msg:'内容是在change事件后后才改变的～'   

            }
        }
    }

</script>

注：书中3.1.5中关于v-for的代码已经失效，可以使用我贴出来的代码哦

v-for还可以解析字典哦，具体代码如下：

<template>
    <div>
        <ul>
            <li v-for="item in items" >
                <span v-for="(value, key) in item">{{key}} : {{value}} </span>
             </li>
        </ul>
    </div>
</template>
<script>


    export default{
        name:'HelloWorld',
        data(){

            return {
                items: [
                     {name:"张三",age:10},
                     {name:"李四",age:15}
                ]
            }
        }
    }
</script>


运行结果如下：
这里写图片描述
v-for还可以在一段范围内取值，代码如下：

<template>
    <dir>
        <span v-for="n in 10">{{n}}</span>
    </dir>
</template>



注：当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
【转载】https://blog.csdn.net/hanhailong18/article/details/81539121

奈斯