vueJS简单的点击显示与隐藏的效果
目前前端框架太多，接触过angular、ember，现在开始倒腾vue
此处用到v-if、v-else、v-show，v-if或让元素不在DOM上，v-show只是改变display:block属性，感觉v-if好
感觉跟适合、
演示效果:http://wjf444128852.github.io/demo/myVue/demo/demo9.html
<!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简单的点击显示与隐藏的效果的更多相关文章
- js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- vue点击切换样式，点击切换地址栏，点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...
- jquery点击显示或隐藏
点击第一个dd,给第一li添加class,点击第二个dd,给第二个li添加class,以此类推 $(function(){ $("dd > a").click(fun ...
- 一款js点击显示和隐藏的例子（pc，移动端通用）
html部分: <div id="box"> <div id="box_title">标题</div> <div id ...
- layui 单选项 点击显示与隐藏
同一个页面有多个单选按钮:https://blog.csdn.net/haibo0668/article/details/86220767
- css---点击显示和隐藏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- android view控件的显示和隐藏动画效果
// 显示动画 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO ...
随机推荐
- android studio 使用gradle 导出jar包，并打包assets目录
警告:本文年久失修. 随着android studio的升级 ,gradle的升级,严格按照本文的代码去做可能不会成功,希望依然可以作为解决问题的思路. 最近项目在做一个sdk,供别的开发者使用,所以 ...
- poj 2528 Mayor's posters（线段树+离散化）
/* poj 2528 Mayor's posters 线段树 + 离散化 离散化的理解: 给你一系列的正整数, 例如 1, 4 , 100, 1000000000, 如果利用线段树求解的话,很明显 ...
- cglib源码分析--转
原文地址:http://www.iteye.com/topic/799827 背景 前段时间在工作中,包括一些代码阅读过程中,spring aop经常性的会看到cglib中的相关内容,包括BeanCo ...
- Anliven - 你的学习为何如此低效？！
拖延 适时学习的本质就是营造机会,具有强烈的时效性,而拖延能够毁灭所有机会! 一个得不到执行的完美计划,比不上一次仓促的执行! 盲目 缺少有效的策略和方法,没有弄清基本的问题(需求--->性质- ...
- PHP学习总结（一）
对最近学习PHP做个简单的总结吧 书籍:<PHP和MySQL Web开发> 环境/工具:wamp/Editplus&Chrome 时间:8月2日-8月7日 内容: 以前把前3章学了 ...
- 帮助你提高排版技巧的18个 PS 文字特效教程
Photoshop 文字特效教程对于学习基础的和高级的排版思维有很大的帮助.在这篇文章中,你会发现一组最新发布的文字效果教程.这些高品质的 Photoshop 教程可以帮助你设计出惊人的2D,3D,木 ...
- GitHub一代：我们都是开源控
我们是新的GitHub一代?GitHub塑造了新式开源文化?嗯,看看十几年开源控.Getable CTO Mikeal Rogers 是怎么说的吧: GitHub本来想做一个开源软件协作平台,结果做着 ...
- Laravel学习
Laravel是个很强大的PHP框架,它剔除了开发中Web开发中比较痛苦的过程,提供了验证(authentication),路由(routing),Session和缓存(caching)等开发过程中常 ...
- 六、GAIA
1. GAIA CSR GAIA (Generic Application Interface Architecture)提供了一个端到端的,与主机无关的生态系统来实现主机应用程序对设备的功 ...
- SQL Server获取下一个编码字符串的实现方案分割和进位
我在前一种解决方案SQL Server获取下一个编码字符实现和后一种解决方案SQL Server获取下一个编码字符实现继续重构与增强两篇博文中均提供了一种解决编码的方案,考虑良久对比以上两种方 ...