三十五、深入Vue.js语法（下篇）
生活随笔
收集整理的這篇文章主要介紹了
三十五、深入Vue.js语法（下篇）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@Author：Runsen
@Date：2020/6/15
人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）
作者介紹：Runsen目前大三下學期，專業化學工程與工藝，大學沉迷日語，Python， Java和一系列數據分析軟件。導致翹課嚴重，專業排名中下。.在大學60%的時間，都在CSDN。決定今天比昨天要更加努力。我的征途是星辰大海！
文章目錄
- v-on
- v-model
- v-else-if
- v-once
v-on
v-on命令就是相當于js中的事件綁定，例如綁定click、mouseover等等監聽事件。
本篇章基于click事件作為示例，說明v-on的基本使用方法。
直接使用指令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"><p :style="{color:fontColor}">{{msg}}</p><button v-on:click="msg = '今天好熱呀!'">改變內容</button><button @click="changeContent()">改變內容1</button><button @click="changeContentColor()">改變顏色</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new Vue({el: '#app',data: {msg: '今天的天氣很好!',fontColor: 'red'},methods: { // 實例的所有函數實現changeContent() {// alert(0);this.msg = '測試改掉沒有!'},changeContentColor(){this.fontColor = 'green';}}}); </script></body> </html>v-model
v-model 是個語法糖，實際就是在觸發 input 事件時去更新 value 值.
下面實現一個點擊添加到li的demo
<!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="text" value="修改info" v-model="info"><button @click='add'>添加</button><ul><li v-for="(item, index) in list" :key="index">{{item}}</li></ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new Vue({el: '#app',data: {info:'',list:[]},methods: {add:function(){this.list.push(this.info)this.info =''}},}); </script> </body> </html>v-else-if
vue 的條件判斷語句
<!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"><p>輸入的成績對應的等級是:</p><p v-if="score >= 90">優秀</p><p v-else-if="score >= 75">良好</p><p v-else-if="score >= 60">及格</p><p v-else>不及格</p><input type="text" v-model="score"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: '#app',data: {score: 90 // 優秀 良好 及格 不及格}});</script> </body> </html>v-once
v-once只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過。
<!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"><p v-once>原始值: {{msg}}</p><p>后面的: {{msg}}</p><input type="text" v-model="msg"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>new Vue({el: '#app',data: {msg: '今天的天氣很好!'}}); </script> </body> </html>如果本文對你有幫助，大家可以點贊轉發一波，有錯誤大家可以評論指出，感謝！
大家繼續加油，未來可期！Runsen的征途是星辰大海！
總結
以上是生活随笔為你收集整理的三十五、深入Vue.js语法（下篇）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10次电脑没有了怎么办啊 Win1
- 下一篇： 三十六、深入Vue.js组件Compon