vue指令用法

v-for

<template>
<div>
<ul v-for="(item,index) in option" :key="item.id">
<li>{{item.name}}</li>
<li @click="delClick(item.id,index,option)">删除</li>
</ul>
</div>
</template>
export default{
data(){
return{
option:[{name:"香蕉",id:1},{name:"苹果",id:2},{name:"樱桃",id:3},{name:"西瓜",id:4}]
}
},
methods:{
delClick(id,item,list){
//第一种删除方法：this.option.splice(index, 1)
//第二种删除方法：this.option = this.option.filter(item => { return item.id!= id })
}
}
}

• Vue会基于key，移除key不存在的元素

v-bind

<template>
<div class="main">
<a :herf="url"></a>
</div>
</template>
export default{
data(){
return{
url:"http://www.baidu.com"
}
}

• 作用:当表达式的值改变时，响应式作用于DOM

v-on

<template>
<div class="main">
<span @click="add("1")" ></a>
</div>
</template>
export default{
data(){
return{
url:"http://www.baidu.com"
}
},
methods:{
add(item){
console.log(item);
}
}

• 给元素绑定方法，绑定事件从methods中设置