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实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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
php中的boolean(布尔)类型详解
2013/10/28 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python实现银行管理系统
2019/10/25 Python
python同时遍历两个list用法说明
2020/05/02 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
大学军训感言
2014/01/10 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
婚假请假条怎么写
2014/04/10 职场文书
环境日宣传活动总结
2014/07/09 职场文书
天鹅湖观后感
2015/06/09 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python