《Vue学习从入门到精通(一)》我们开启了Vue的学习之路，今天我们就来一块学习一下Vue.js中的内部指令。
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" />注：书中没有源码
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>
debounce
本来是用来设置延时的，但是现在已经被废弃掉了，具体可以参考这个网址：
https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed
v-for
v-for指令基于元数据重复渲染元素。具体实例代码如下：
<template>
<div>
<ul>
<li v-for="(item, index) in items">
{{index}} - {{parentMessage}} {{item.msg}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:'HelloWorld',
data(){
return {
parentMessage:'滴滴',
items: [
{msg:'顺风车'},
{msg:'专车'}
]
}
}
}
</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>运行结果如下：
更多优质文章，可以微信扫码关注：
