今天要写的是 vue.js 里面两个很常用的指令:v-model 和 v-for 。
1、v-model
v-model 是 vue.js 里面唯一一个可以实现数据双向绑定的指令。
v-model 只能通过表单元素实现与用户的交互,也就是说, v-model 只能绑定到表单上面,如:input(text , radio , address , email...) select checkbox textarea
下面来举个例子:
<div id="app">
<h4>{{ msg }}</h4>
<input type="text" style="width:100%;" v-model="msg">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"大家都是好学生,爱敲代码,爱学习,简直完美,没瑕疵!"
},
methods:{
}
})
</script>
2、v-for
v-for 循环普通数组:
<div id="app">
<p v-for="(item,i) in list">索引值:{{ i }}---列表值:{{ item }}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[1, 2, 3, 4, 5, 6]
},
methods:{}
})
</script>
v-for 循环对象数组:
<div id="app">
<P v-for="item in list">id:{{ item.id}}---name:{{ item.name }}</P>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
list:[
{id: 1, name: 'zs1'},
{id: 2, name: 'zs2'},
{id: 3, name: 'zs3'},
{id: 4, name: 'zs4'},
]
},
methods:{
}
})
</script>
v-for 循环对象:
<div id="app">
<p v-for="(val, key) in user">key:{{ key }}---val:{{ val }} </>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
user:{
id:1,
name:"托尼.世达克",
gender:"男"
}
},
})
</script>
注意:在遍历对象身上的键值对的时候,除了有 val 和 key ,在第三个位置还有一个索引。
v-for 迭代数字:
<div id="app">
<p v-for="count in 10">
这是第 {{ count }} 次循环
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
注意:数字迭代是从 1 开始的。
v-for 中 key 的使用注意事项:
2.2.0+ 的版本里,当在数组中使用 v-for 时, key 现在是必须的。
<div id="app">
<p v-for="item in list" :key="item.id">
<input type="checkbox">
{{ item.id }}--- {{ item.name }}
</p>
</div>
<script>
var vm = new Vue({
el:"app",
data:{
list:[
{id:1, name:"李斯"},
{id:2, name:"嬴政"},
{id:3, name:"赵高"},
{id:4, name:"韩非"},
{id:5, name:"荀子"},
]
},
methods:{
}
})
</script>
3、v-if 和 v-show 的用法
v-if 是将元素彻底删除,v-show 是将元素隐藏或显示
<div id="app">
<input type="button" value="反转" @click="btn">
<h3 v-if="flag">这是用v-if控制的</h3>
<h3 v-show="flag">这是用v-show控制的</h3>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
flag:true
},
methods:{
btn(){
this.flag=!this.flag
}
}
})
</script>