Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:02:29
Original
1696 people have browsed it

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>
Copy after login

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.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!