编程 Javascript

vueJS简单的点击显示与隐藏的效果【实现代码】

Posted in Javascript onMay 03, 2016

目前前端框架太多，接触过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简单的点击显示与隐藏的效果【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

vueJS简单的点击显示与隐藏的效果【实现代码】

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

document.onreadystatechange事件的用法分析

Oct 17 Javascript

javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

Dec 16 Javascript

js 实现的可折叠留言板(附源码下载)

Jul 01 Javascript

JS判断浏览器是否支持某一个CSS3属性的方法

Oct 17 Javascript

AngularJs directive详解及示例代码

Sep 01 Javascript

微信小程序 checkbox组件详解及简单实例

Jan 10 Javascript

原生js实现放大镜特效

Mar 08 Javascript

vue2.0与bootstrap3实现列表分页效果

Nov 28 Javascript

简单介绍react redux的中间件的使用

Apr 06 Javascript

vue里如何主动销毁keep-alive缓存的组件

Mar 21 Javascript

jquery实现聊天机器人

Feb 08 jQuery

在vue中created、mounted等方法使用小结

Jul 21 Javascript

javascript的列表切换【实现代码】

May 03 #Javascript

jQuery中队列queue()函数的实例教程

May 03 #Javascript

JavaScript中split与join函数的进阶使用技巧

May 03 #Javascript

总结JavaScript三种数据存储方式之间的区别

May 03 #Javascript

深入解析jQuery中Deferred的deferred.promise()方法

May 03 #Javascript

浅析函数声明和函数表达式——函数声明的声明提前

May 03 #Javascript

详解JavaScript异步编程中jQuery的promise对象的作用

May 03 #Javascript