vue.js — v-model、v-for、v-if 、v-show 的基本用法

146 阅读 0 评论 97 点赞

我是靠谱客的博主舒心面包，这篇文章主要介绍vue.js — v-model、v-for、v-if 、v-show 的基本用法，现在分享给大家，希望可以做个参考。

今天要写的是 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

下面来举个例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 循环普通数组：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<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 循环对象数组：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 循环对象：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 迭代数字：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 现在是必须的。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 是将元素隐藏或显示

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>