下面小編就為大家帶來一篇vueJS簡單的點擊顯示與隱藏的效果【實現代碼】。小編覺得挺不錯的，現在分享給大家，一起跟隨小編過來看看吧
目前前端框架太多，接觸過angular、ember，現在開始倒騰vue
此處用到v-if、v-else、v-show，v-if或讓元素不在DOM上，v-show只是改變display:block屬性，感覺v-if好
感覺跟適合、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if、v-else、v-show</title>
<script src="../js/vue.js"></script>
<!--copy from http://vuejs.org.cn/guide/-->
</head>
<body>
<div id="app">
<p v-if="willShow">顯示顯示顯示</p>
<p v-else>隱藏隱藏隱藏隱藏</p>
<button @click="fn()">改變</button>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
willShow:true
},
methods:{
fn:function(){
if(this.willShow==true){
this.willShow=false;
}else{
this.willShow=true
}
}
}
});
</script>
</body>
</html>
以上這篇vueJS簡單的點擊顯示與隱藏的效果【實現代碼】就是小編分享給大家的全部內容了，希望能給大家一個參考
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
