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 相关文章推荐
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
three.js实现圆柱体
Dec 30 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
Python常见数据结构详解
2014/07/24 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python中的filter()函数的用法
2015/04/27 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
flask实现验证码并验证功能
2019/12/05 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
毕业生个人自荐书
2015/03/05 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
初中体育课教学反思
2016/02/16 职场文书
初中思想品德教学反思
2016/02/24 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL