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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
javascript白色简洁计算器
May 04 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
js+canvas实现纸牌游戏
Mar 16 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php中explode与split的区别介绍
2012/10/03 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python实现微信自动回复功能
2018/04/11 Python
python爬取网页转换为PDF文件
2018/06/07 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
python 爬取天气网卫星图片
2021/06/07 Python