vueJS affichage et effet de masquage par simple clic [code d'implémentation]_compétences javascript-js tutoriel-php.cn

vueJS affichage et effet de masquage par simple clic [code d'implémentation]_compétences javascript

WBOY

Libérer： 2016-05-16 15:02:29

original

1696 Les gens l'ont consulté

Il y a trop de frameworks front-end à l'heure actuelle. J'ai été exposé à Angular et Ember, et maintenant je commence à passer à vue

v-if, v-else, v-show sont utilisés ici. v-if peut faire en sorte que l'élément ne soit pas sur le DOM ne modifie que l'attribut display:block. 🎜>

Ça se sent et s'adapte,

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

Copier après la connexion

L'effet d'affichage et de masquage par simple clic ci-dessus de vueJS [code d'implémentation] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra Script Home.