三十四、深入Vue.js语法（中篇）
生活随笔
收集整理的這篇文章主要介紹了
三十四、深入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
v-on命令就是相當于js中的事件綁定，例如綁定click、mouseover等等監聽事件。官網說明文檔
直接使用指令v-on，使用簡化指令@
<!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="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>計數器
<!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"><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
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
v-if : 當flag為true，則顯示，如果flag為false，則隱藏。v-if 的特點：每次都會重新刪除或創建元素
body><div id="app"><input type="button" value="切換顯示" @click='changIsshow'><p v-if="isshow">runsen</p></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
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%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F839b48daee6bed189d49aa6eac912b353ce0db3d.jpg',imgSrc1: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592199212627&di=28f4daed2069121c770cf4fa6f79c412&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111113%2F1111131811fe8b6d1575c620d7.jpg',alt: '我是美女'}});</script> </body> </html>v-for
v-for指令常用于遍歷數組或者對象，然后依次渲染出指定的內容。同時，我們也知道，官方文檔也建議，在使用 v-for指令時，記得要加上 key屬性，方便提升應用性能。例如一個簡單的增刪Todo應用如下所示：
<!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="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语法（中篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gho镜像怎么用u盘装 使用U盘装载GH
- 下一篇： 三十五、深入Vue.js语法（下篇）