현재 프론트엔드 프레임워크가 너무 많아서 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 [구현 코드]의 단순 클릭 표시 및 숨기기 효과는 모두 편집기에서 공유한 내용이므로 참고가 되기를 바라며, 또한 모두가 Script Home을 지원해 주시길 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
