vue指令
3. v-for, v-model
- i. v-for
根据数据生成列表结构
<body>
<div id="app">
<input type="button" value="增加" @click="add()">
<!-- @click 无参函数加不加括号都可以 -->
<input type="button" value="减少" @click='remove'>
<ul>
<li v-for="(item,index) in singerList">
<div>
<div class="singer">{{index+1}}</div>
<div class="singer">{{item.name}}</div>
</div>
</li>
</ul>
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
singerList:[],
},
methods: {
add:function(){
this.singerList.push({name:'周杰伦'});
this.singerList.push({name:'王力宏'})
},
remove:function(){
this.singerList.shift();
}
}
});
</script>
</body>
(item,index) in singerList
item 为数组中元素
index 为元素对应的下标(根据位置决定，第二个元素）
css小技巧
- 实际的布局中为追求更好的视觉效果，一般都会隐藏到无序列表前面的小圆点
- li 中的元素可能也会比较复杂，不止止显示个文本那么简单
可以嵌套div，并设置属性display: inline-block;
<style type="text/css">
/* 隐藏li前面的小圆点 */
li{
list-style: none
}
/* 块级元素不换行 */
.singer{
display: inline-block;
}
</style>
总结
数组经常和v-for结合使用,语法是( item,index ) in 数据
数组长度的更新会同步到页面上,是响应式的
- ii. v-model
获取和设置表单元素的值(双向数据绑定)
所谓双向数据绑定是指:
1.解析后，data中的值会同步给表单元素
2.当更改了表单元素，也会同步给data
<body>
<div id="app">
<input type="text" value="搜索" v-model="query" @keyup.enter="search">
<h2>{{query}}</h2>
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建Vue实例对象, 设置el属性和data属性
var app = new Vue({
el: '#app',
data: {
// 查询关键字
query: "王力宏",
},
methods: {
search:function(){
console.log(this.query);
},
}
});
</script>
</body>
总结
v-model指令的作用是便捷的设置和获取表单元素的值
网友评论