vue的一些简单指令
1》什么是指令:在节点上带有v-xxx的内容
2》v-bind
v-bind:value、v-bind:img
简写
:value
3》v-on
v-on:click、v-on:mouseover
简写:
@click
4》v-text 、 v-html
5》数据双向绑定:v-model
双向绑定的原理:发布者--》订阅者
6》v-once:也可以插入值,但是不更新数据
7》条件渲染 : v-if、v-else
8》列表渲染 : v-for
v-for='item in arr'
v-for='(item,index) in arr'
应用案例DEMO(购物车):
App.vue
<table v-if='list.length > 0'>
<thead>
<tr>
<td>序号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr
v-for='(item,index) in list'
>
<td>
{{item.id}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.price}}
</td>
<td>
<button
@click='reduce(index)'
:disabled='item.count===1'
>-</button>
{{item.count}}
<button @click='add(index)'>+</button>
</td>
<td>
<button @click='remove(index)'>删除</button>
</td>
</tr>
</tbody>
<h1>总价:{{totalPrice}}</h1>
</table>
<div v-else>暂无数据...</div>
</div>
</template>
<script>
export default{
data () {
return {
list:[
{
id:0,
name:"足球",
price:200,
count:1
},
{
id:1,
name:"上衣",
price:109,
count:1
},
{
id:2,
name:"鞋",
price:1500,
count:1
},
{
id:3,
name:"充电宝",
price:70,
count:1
}
]
}
},
methods:{
add(index){
this.list[index].count++;
},
reduce(index){
if(this.list[index].count === 1) return;
this.list[index].count--;
},
remove(index){
this.list.splice(index,1)
}
},
computed:{
totalPrice(){
let total = 0;
for(let i=0;i<this.list.length;i++){
total+= this.list[i].price*this.list[i].count;
}
return total;
}
}
}
</script>
<style>
table{
border:1px solid #f5f5f5;
border-spacing: 0;
border-collapse: collapse;
}
tr,td{
padding:15px;
border:1px solid #e9e9e9;
}
</style>