<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="vif">
<button v-on:click="func1">点我</button>
<p>{{ judge }}</p>
<p v-if="judge">当点击上面的按钮时我会隐藏!</p>
<button v-on:click="func2">点击跳转销毁Vue对象</button>
</div>
<script>
var judge=true
var app4 = new Vue({
el:'#vif',
data:{
judge:judge
},
methods:{
func1:function(){
if(this.judge == true){
this.judge=false;
}else{
this.judge=true;}
},
func2:function(){
this.$destroy();
}
},
beforeCreate:function(){
console.log('Vue instance ready2Create...')
},
created:function(){
console.log('Vue instance created...')
},
beforeUpdate:function(){
console.log('Vue instance beforeUpdate...')
},
updated:function(){
console.log('Vue instance updated...')
},
beforeMount:function(){
console.log('Vue instance beforeMounte...')
},
mounted:function(){
console.log('Vue instance mounted...')
},
beforeDestroy:function(){
console.log('Vue instance beforeDestroy...')
},
destroyed:function(){
console.log('Vue instance destroyed...')
}
})
</script>
</body>
</html>
评论