當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue-watch选项

發(fā)布時間：2023/12/20 vue 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue-watch选项小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Vue ----watch 選項(xiàng)

用于監(jiān)聽數(shù)據(jù)變化：

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="demo"> 11 <h2>Vue-watch選項(xiàng)</h2> 12 <div> 13 <p>室外溫度：{{tem}} `C</p> 14 <p>穿衣建議: {{dress}}</p> 15 <p><button @click="add(4)" >增加</button><button @click="reduce(4)">減少</button></p> 16 </div> 17 </div> 18 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 19 <script> 20 var dressList=["T恤","襯衫","羽絨服"]; //手動添加數(shù)據(jù) 21 var app=new Vue({ 22 el:"#demo", 23 data: { 24 tem:16, 25 dress:"襯衫" 26 }, 27 created () { 28 29 }, 30 methods: { 31 add:function(num){ 32 this.tem +=num; 33 }, 34 reduce:function(num){ 35 this.tem -=num; 36 } 37 }, 38 watch:{ 39 tem:function(newValue,oldValue){ 40 if(newValue >= 20){ 41 this.dress=dressList[0] 42 }else if(newValue < 20 && newValue > 0){ 43 this.dress =dressList[1]; 44 }else if(newValue <=0){ 45 this.dress =dressList[2]; 46 } 47 } 48 } 49 }); 50 　　60 </script> 61 62 <style lang="scss"> 63 #demo { 64 65 } 66 </style> 67 68 </body> 69 </html>

當(dāng)使用實(shí)例 watch事件

app.$watch('tem',function(newValue,oldValue){if(newValue >= 20){this.dress=dressList[0]}else if(newValue < 20 && newValue > 0){this.dress =dressList[1];}else if(newValue <=0){this.dress =dressList[2];}})

轉(zhuǎn)載于:https://www.cnblogs.com/coffer/p/10286229.html

總結(jié)

以上是生活随笔為你收集整理的Vue-watch选项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。