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 相关文章推荐
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 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字符串的编码问题的详细介绍
2013/04/27 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
js进行表单验证实例分析
2015/02/10 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
浅谈python对象数据的读写权限
2016/09/12 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
浅析PEP572: 海象运算符
2019/10/15 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Keras搭建自编码器操作
2020/07/03 Python
python pip如何手动安装二进制包
2020/09/30 Python
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
暑假实习求职信范文
2013/09/22 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
父母寄语大全
2014/04/12 职场文书
电台编导求职信
2014/05/06 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python
vue里使用create, mounted调用方法
2022/04/26 Vue.js
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers