Home > Article > Web Front-end > vueJS simple click display and hiding effect [implementation code]_javascript skills

vueJS simple click display and hiding effect [implementation code]_javascript skills

WBOYOriginal: 2016-05-16 15:02:291746browse

There are currently too many front-end frameworks. I have been exposed to angular and ember, and now I am starting to switch to vue

v-if, v-else, v-show are used here, v-if can make the element not on the DOM, v-show just changes the display:block attribute, I feel v-if is better

Feeling and suitable,

<!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>

The above simple click display and hide effect of vueJS [implementation code] is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support Script Home.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript scopes and scope chainsNext article：JavaScript scopes and scope chains

See more

vueJS simple click display and hiding effect [implementation code]_javascript skills

Related articles