Heim > Artikel > Web-Frontend > vueJS简单的点击显示与隐藏的效果【实现代码】_javascript技巧
vueJS简单的点击显示与隐藏的效果【实现代码】_javascript技巧
- WBOYOriginal
- 2016-05-16 15:02:291691Durchsuche
目前前端框架太多，接触过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简单的点击显示与隐藏的效果【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript作用域和作用域链Nächster Artikel：基于Bootstrap使用jQuery实现简单可编辑表格_javascript技巧