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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
javascript实现简易计算器功能
Sep 23 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获取POST数据的几种方法汇总
2015/03/03 PHP
PHP查询分页的实现代码
2017/06/09 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
深入理解Promise.all
2018/08/08 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python 垃圾收集机制的实例详解
2017/08/20 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
生产经理的自我评价分享
2013/11/07 职场文书
运动会稿件100字
2014/02/21 职场文书
寄语学生的话
2014/04/10 职场文书
《海底世界》教学反思
2014/04/16 职场文书
建筑横幅标语
2014/10/09 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
植物园观后感
2015/06/11 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript