1.tab栏
思路：
1.先把布局写好；2.当点击li时，把当前的i传给msg，通过判断msg和i是否相等，从而达到显示隐藏的目的。
<body>
<div id="box">
<div class="list">
<ul>
<li v-for="(v,i) in mylist" @click="change(i)">{{v}}</li>
</ul>
</div>
<div class="con">
<div v-for="(v,i) in mycon" v-if="i==msg">{{v}}</div>
</div>
</div>
<script>
new Vue({
el:"#box",
data:{
mylist:["a","b","c"],
mycon:["a1","b1","c1"],
msg:''
},
methods:{
change(i){
this.msg = i;
}
}
})
</script>
</body>2.shoplist的插入和删除
思路：
1.先写好布局 ；2.把input的数据储存在一个数组里，然后对数组进行插入和删除操作。（读取input数据通过v-model，数据双向绑定）
<div id="box">
<div class="top">
商品名称：<input type="text" v-model="name">
商品价格：<input type="text" v-model="price">
<button @click="add()">增加商品</button>
</div>
<div class="table">
<table>
<tr>
<td>商品ID</td>
<td>商品名称</td>
<td>商品价格</td>
<td>删除</td>
</tr>
<tr v-for="(v,i) in myData">
<td>{{i+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
<td @click="del(i)">删除</td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el:'#box',
data:{
myData:[{name:'张三',price:'16'}],
name:'',
price:''
},
methods:{
add(){
if(this.name != '' && this.price != ''){
this.myData.push({name:this.name,price:this.price}),
this.name='',
this.price=''
}
},
del(i){
this.myData.splice(i, 1);
}
}
})
</script>
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
