当前位置：尊龙游戏旗舰厅官网 > 前端技术 > vue >内容正文

vue

三十四、深入vue.js语法（中篇） -尊龙游戏旗舰厅官网

发布时间：2024/10/8 vue 7 豆豆

尊龙游戏旗舰厅官网收集整理的这篇文章主要介绍了三十四、深入vue.js语法（中篇）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen
@date：2020/6/15

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：runsen ）

作者介绍：runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，python， java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在csdn。决定今天比昨天要更加努力。我的征途是星辰大海！

文章目录

v-on
计数器
v-show
v-if
v-bind
v-for

v-on命令就是相当于js中的事件绑定，例如绑定click、mouseover等等监听事件。尊龙游戏旗舰厅官网说明文档

直接使用指令v-on，使用简化指令@

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head> <body><div id="app"><input type="button" value="v-on指令" v-on:click="doit"><input type="button" value="v-on简写指令" @click="doit">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new vue({el:"#app",data:{message:"runsen is 20",},methods: {doit:function(){alert("doit")}},})script> body> html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head> <body><div id="app"><div class="input-num"><button @click='add'>-button><span>{{num}}span><button @click='sub'> button>div>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new vue({el:"#app",data:{num:1,},methods: {add:function(){if (this.num<10) {this.num;} else {alert('最大值为10');}},sub:function(){if (this.num>0) {this.num--;} else {alert('最小值为0');}}},})script> body> html>

v-show : 当flag为true，则显示，如果flag为false，则隐藏。v-show 的特点：每次不会重新进行dom的删除和创建操作，只是切换了元素的 display:none 样式

<!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title> </head> <body><div id="app"><input type="button" value="切换显示图片" @click="changisshow"><input type="button" value="age 1" @click="add"><img src="https://img-blog.csdnimg.cn/20200609152208864.png"v-show="isshow"><img src="https://img-blog.csdnimg.cn/20200609152208864.png"v-show="age>=20"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new vue({el:"#app",data:{isshow:false,age:17},methods: {changisshow:function(){this.isshow = !this.isshow;},add:function(){this.age;}},})</script> </body> </html>

v-if : 当flag为true，则显示，如果flag为false，则隐藏。v-if 的特点：每次都会重新删除或创建元素

body><div id="app"><input type="button" value="切换显示" @click='changisshow'><p v-if="isshow">runsenp>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new vue({el:"#app",data:{isshow:false,age:17},methods: {changisshow:function(){this.isshow = !this.isshow;},},})script> body>

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

v-bind 用于处理 html 中的标签属性。标签对内定义v-bind 冒号属性=‘variable’，形如：

，作用是将属性与数据进行单向绑定，只能将数据层中的属性传给绑定属性。v-bind可缩写成 :title=“title” <!doctype html> <html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title> </head> <body><div id="app"><img v-bind:src="imgsrc" :alt="alt"><img :src="imgsrc1" :alt="alt"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new vue({el: '#app',data: {imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592199194786&di=b2d5483f86b8b38fb2dd12e932eaa889&imgtype=0&src=http://i0.hdslb.com/bfs/archive/839b48daee6bed189d49aa6eac912b353ce0db3d.jpg',imgsrc1: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592199212627&di=28f4daed2069121c770cf4fa6f79c412&imgtype=0&src=http://attachments.gfan.com/forum/attachments2/day_111113/1111131811fe8b6d1575c620d7.jpg',alt: '我是美女'}});</script> </body> </html>

v-for指令常用于遍历数组或者对象，然后依次渲染出指定的内容。同时，我们也知道，官方文档也建议，在使用 v-for指令时，记得要加上 key属性，方便提升应用性能。例如一个简单的增删todo应用如下所示：

<html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>documenttitle> head> <body><div id="app"><input type="button" value="添加数据" @click="add"><input type="button" value="移除数据" @click="remove"><ul><li v-for="(item, index) in arr" > 第{{index 1}}个城市：{{item}}li>ul><h2 v-for="(item, index) in person" :key="index">{{item.name}}h2>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>new vue({el: '#app',data() {return {arr:['北京','上海','广州','武汉'],person:[{name:"runsen"},{name:"maoli"}]}},methods: {add:function(){this.person.push({name:"maoli"})},remove:function(){this.person.shift()}},});script> body> html>

如果本文对你有帮助，大家可以点赞转发一波，有错误大家可以评论指出，感谢！

大家继续加油，未来可期！runsen的征途是星辰大海！

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是尊龙游戏旗舰厅官网为你收集整理的三十四、深入vue.js语法（中篇）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。