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

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

WBOYoriginal: 2016-05-16 15:02:291746parcourir

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Portées JavaScript et chaînes de portéesArticle suivant：Portées JavaScript et chaînes de portées

Articles Liés

Voir plus