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

Javascript 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
js 函数性能比较方法
2020/08/24 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python版本五子棋的实现代码
2018/12/11 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
聚美优品励志广告词
2014/03/14 职场文书
股东合作协议书
2014/09/12 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
小学运动会加油词
2015/07/18 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书