vue指令
3. v-for, v-model
- i. v-for
根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)
<body>
<div id="app">
<input type="button" value="增加" @click="add()">
<!-- @click 無參函數(shù)加不加括號(hào)都可以 -->
<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>
<!-- 導(dǎo)入開發(fā)版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 創(chuàng)建Vue實(shí)例對(duì)象, 設(shè)置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 為數(shù)組中元素
index 為元素對(duì)應(yīng)的下標(biāo)(根據(jù)位置決定，第二個(gè)元素）
css小技巧
- 實(shí)際的布局中為追求更好的視覺效果，一般都會(huì)隱藏到無序列表前面的小圓點(diǎn)
- li 中的元素可能也會(huì)比較復(fù)雜迎献，不止止顯示個(gè)文本那么簡單
可以嵌套div腻贰，并設(shè)置屬性display: inline-block;
<style type="text/css">
/* 隱藏li前面的小圓點(diǎn) */
li{
list-style: none
}
/* 塊級(jí)元素不換行 */
.singer{
display: inline-block;
}
</style>
總結(jié)
數(shù)組經(jīng)常和v-for結(jié)合使用,語法是( item,index ) in 數(shù)據(jù)
數(shù)組長度的更新會(huì)同步到頁面上,是響應(yīng)式的
- ii. v-model
獲取和設(shè)置表單元素的值(雙向數(shù)據(jù)綁定)
所謂雙向數(shù)據(jù)綁定是指:
1.解析后，data中的值會(huì)同步給表單元素
2.當(dāng)更改了表單元素践盼，也會(huì)同步給data
<body>
<div id="app">
<input type="text" value="搜索" v-model="query" @keyup.enter="search">
<h2>{{query}}</h2>
</div>
<!-- 導(dǎo)入開發(fā)版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 創(chuàng)建Vue實(shí)例對(duì)象, 設(shè)置el屬性和data屬性
var app = new Vue({
el: '#app',
data: {
// 查詢關(guān)鍵字
query: "王力宏",
},
methods: {
search:function(){
console.log(this.query);
},
}
});
</script>
</body>
總結(jié)
v-model指令的作用是便捷的設(shè)置和獲取表單元素的值
