directive
用法:
案例:
<html>
<head></head>
<body>
<div id="app">
<div v-color="color">
自定义指令变色
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.directive("color",function (el,bianse) {
el.style.color = bianse.value
})
var app = new Vue ({
el:"#app",
name:"app",
data:{
color:"red"
}
})
</script>
</body>
</html>
set
用法:
案例:
<html>
<head></head>
<body>
<div id="app">
<div>
<ul>
<li v-for="item in items">{{item.name}}</li>
</ul>
<button @click="change">change</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue ({
el:"#app",
name:"app",
data:{
items:[{name:"miao"},{name:"zhang"}]
},
methods:{
change(){
Vue.set(this.items,0,{name:"wang"})
}
}
})
</script>
</body>
</html>