vue判断显示隐藏_web前端进阶之【Vue】10分钟掌握Vue 在学Vue的童鞋过来拿资料
1.Vue官网
https://cn.vuejs.org
2.引入
通过script标签引入vue时最好放在head里,避免抖屏的情况。
Tips:抖屏是指页面稍微大些,刷新页面会出现{{ }}的样式十分丑陋
3.实例
元素通过id 和new Vue对象的 el 进行绑定,该id对应一个挂载点,Vue实例只会处理挂载点的内容;模板是指可以将挂载点的内容写入template标签中,同样会生效。
{{msg}} 这样的语法叫做差值表达式,表示将某元素插入到页面中
<div id="root"><h1>luhao {{msg}}<h1></div>
<script>new Vue({ el: "#root", // template:'<h1>luhao {{msg}}<h1>',data:{ msg:"hello world" ,number:123} })
</script>
1.v-text:直接在页面上显示
<h1 v-text="number"></h1>
text效果:
2.v-html:以html在页面上显示
<h1 v-html="number"></h1>
html效果:
3.点击触发事件 v-on:click
v-on:click=“点击触发的方法名”,再在methods中写上对应的方法名称,即可完成点击触发事件
v-on 可以简写成 @
4. v-bind: 属性绑定
<div id="root"> <div v-bind:title="title">hello world</div></div>
<script>
new Vue({ el: "#root", data:{ title:"我是可变title" }
})
</script>
当需要进行数据对象绑定时,比如将title与data中的title绑定,需要用到v-bind指令。
效果如下:
v-bind: 可以简写成 :
5.双向数据绑定 v-model
属性绑定只是单向属性绑定,并不能通过页面改变Vue对象里的值,如果要实现双向的数据绑定,可以通过给v-model
<div id="root"> <div v-bind:title="title">hello world</div></div><input v-model="content"/><div>{{content}}</div>
<script>
new Vue({ el: "#root", data:{ title:"我是可变title",content:"我是绑定content"}
})
</script>
效果如下:
6.计算属性 computed
当需要对多个值进行计算时,可以使用computed获取最终结果。例如:要获得全名,将姓和名拼接起来。
<div id="root"> 姓:<input v-model="firstName"/>名:<input v-model="lastName"/><div>{{fullName}}</div><div>{{count}}</div>
<script>
new Vue({ el: "#root", data:{ firstName:'',lastName:'',count:0} ,computed:{ fullName:function () { return this.firstName + ' ' + this.lastName },,watch:{ firstName:function () { this.count++ }, lastName:function () { this.count++ }}}
})
</script>
效果如下:
7.侦听器 watch
当需要对某个对象的改变进行侦听时,可以通过watch来完成。例如:要计算姓和名改变的次数。(代码见6:计算属性)
效果如下:
8.条件判断 v-if
当需要通过点击按钮对div内的对象进行判断时,如果对象为显示状态就隐藏起来,如果对象是隐藏状态就显示它,可以通过v-if来处理。
<div id="root"> <div v-if="show">hello world</div><button @click="handleClick">toggle</button>
</div>
<script>
new Vue({ el: "#root", data:{ show:true} ,methods:{handleClick: function () { this.show = !this.show;}}
})
</script>
效果如下:
点击前:
点击后:
9.显示和隐藏 v-show
当需要对元素进行显示和隐藏时,可以通过v-show来实现,基本功能和v-if类似,但是不会销毁dom上的对象,只是将其隐藏起来,相当于加了一个display:none的属性,和v-if相比性能较高,如果是需要频繁切换隐藏显示状态的元素,使用v-show比较好。
<div v-show="show">hello world</div>
10.遍历 v-for
当需要遍历一个列表里的值时,可以用v-for。index为每个元素的编号,可以作为key值,::key可以提升数据加载的效率。
<div id="root"> <ul><li v-for="(item,index) of list" :key="item">{{item}}</li></ul>
</div>
<script>
new Vue({ el: "#root", data:{ list:[1,2,3]}
})
</script>
4.实现简易TodoList
TodoList:相当于一个任务列表,要实现的功能是通过页面添加删除任务列表。具体实现可以查看代码以及注释,主要原理是通过发布订阅模式实现父组件和子组件的属性传值来对数组进行操作。
<!--组件化开发TodoList-->
<div id="root"><div><input v-model="inputValue"/><button @click="handleSubmit">提交</button> <!--click事件--></div> <!--数据流转:inputValue -> list -> item -> content --><ul><!--content中的内容是从list中遍历出来的,通过属性从父组件向子组件进行传值--><todo-itemv-for="(item,index) of list":key="index":content="item":index="index"@delete="handleDelete"><!--父组件监听子组件delete事件,当触发delete事件时,进行handleDelete操作,此处用到了【发布订阅模式】--></todo-item></ul>
</div>
<script>Vue.component('todo-item', { //子组件(全局组件:可以在任何地方使用)props: ['content', 'index'], //接受从外部传来的与名字对应的值template: '<li @click="handleClick">{{content}}</li>',methods: {handleClick: function () {this.$emit('delete', this.index) //向外【发布】触发事件delete,并且该事件携带了index值}}})new Vue({ //父组件el: "#root",data: {inputValue: '',list: []},methods: {handleSubmit: function () {this.list.push(this.inputValue) //点击提交后将数据加入到数组中this.inputValue = '' //清空输入框的值},handleDelete: function (index) {this.list.splice(index, 1) //删除数组中下标为index的1条数值}}})
</script>
实际效果:
增加list:
点击后删除:
vue判断显示隐藏_web前端进阶之【Vue】10分钟掌握Vue 在学Vue的童鞋过来拿资料相关推荐
- bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面?...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
- vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分 本届作业 聊一聊React和Vue的区别 老版本的项目环境如何创 ...
- vue el-table 显示/隐藏列异常-表格数据域高度变小
在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域的高度会变小 ...
- eclipese web前端开发教学_Web前端零基础好学吗?新手该怎么学?
众所周知,Web前端是现在很火的行业,找工作的人也多,招聘的公司也多,工作环境也好,各招聘公司给的工资也高,这么火热的行业还是供不应求. Web前端市场的供不应求直接导致前端工程师的待遇提高,另外一方 ...
- vue元素显示隐藏 v-if 和 v-show 指令
v-if 和 v-show 在vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果. 语法: <标签 v-if="true/f ...
- Springboot + vue 上传图片 显示图片
Springboot + vue 上传显示图片 上传图片: 前端: <el-uploadclass="upload-facepic"action="#": ...
- 解决Win XP登录后等待10分钟才显示桌面的问题
一位朋友的电脑最近出现了奇怪的问题:登录后等待10分钟才显示桌面,系统托盘区的瑞星杀毒软件.防火墙.卡卡安全助手.QQ电脑管家的监控图标有时不显示,需要手动启动.请偶帮忙解决. 开机,在登录界面选择用 ...
- display none 隐藏后怎么显示_web前端入门到实战:元素显示隐藏的9种思路
我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴 ...
- vue 自定义属性判断点击每个item 显示隐藏
用到的知识点有循环读出列表 v-for map 或 vue.set <!DOCTYPE html> <html ng-app="app"> <hea ...
最新文章
- Android studio 开发工具,试图预览工具不见了找会设置
- Science:充满铵盐的环境依然发生固氮
- 多行文本框限制输入字符长度(两种方法)
- 八款常用的 Python GUI 开发框架推荐
- 获取局域网内服务器信息,使用Java代码获取服务器性能信息及局域网内主机名.pdf...
- lmbs PHP,PHP 清空 MySql 指定数据表中的所有数据
- 数组的几个重要方法以及如何清空数组
- Winform文件下载之断点续传
- iphone中input标签会多出一块的解决办法
- vue点击按钮跳转路由
- 中国半导体仍然弱小 产业生态体系亟需完善
- STM32几种流行开发环境的优缺点
- SSM5.2版本整合
- 2014年十大云计算发展趋势分析及预测
- 用Jsoup爬取中国天气网的实时天气(空气质量、温度、相对湿度、降雨量、风力风向)
- CCProxy网络共享代理服务端配置使用
- [ecshop 资料]ecshop积分充值可充值等级积分余消费积分教程 pay_points
- bootstrap3中使用bootstrap-datetimepicker日期插件的用法
- nifty bootstrap_nifty admin_nifty admin 下载-一个高端的bootstrap后台管理模板
- 银行 结算 清分清算 对账
热门文章
- ping32终端安全管理方案_RFID固定资产管理解决方案,RFID资产管理,RFID手持终端
- QT下 cannot find -IGL的解决办法
- 双向TVS管 30KP42CA
- java怎么用return代替else_java – 从一个隐含或明确的“else”方法返回,还是用一个“return”语句返回?...
- fastjson反序列化漏洞研究(下)
- 事件循环机制(even loop)
- Python之路(第二十篇) subprocess模块
- 1968: [Ahoi2005]COMMON 约数研究
- SlidingMenu的简单使用
- php中curl类常用方法封装和详解