vueJS简单的点击显示与隐藏的效果
2024-08-27 02:37:22
目前前端框架太多,接触过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>
最新文章
- 使input文本框随其中内容而变化长度的方法
- Ubuntu安装Oracle SQLDeveloper
- centos 7安装mysql报错-bash: ./scripts/mysql_install_db: /usr/bin/perl: bad interpreter: No such file or directory
- vsftpd的安装
- 第二百七十天 how can I 坚持
- static在实例Extends、Overload中理解
- ArcMap制图_显示指定区域地图内容
- kloxo面板教程-折腾了一天
- 校门外的树-poj
- Visual Studio高效实用的扩展工具、插件
- Java数据结构和算法 - 数组
- ESP8266开发综合篇第十四节(LUA)-8266作为TCP服务器,Android客户端连接,显示温湿度,控制继电器
- 阿里云ECS服务器云监控(cloudmonitor)Go语言版本插件安装卸载与维护
- ctrl + alt + T无法启动终端
- Centos7系统初始化脚本
- NGINX: 统计网站的PV、UV、独立IP
- 【转】ZooKeeper详细介绍和使用第一节
- Apache 的mod_auth_cas模块的介绍和使用
- Scrum Meeting 10.27
- Linux查看硬件信息命令