国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術文章
文章詳情頁

javascript - vue 如何判斷v-for里的某個值發送變化

瀏覽:136日期:2023-04-19 08:46:29

問題描述

先貼代碼,直接粘貼過去就能看效果

<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title></title> <script src='https://cdn.bootcss.com/vue/2.3.4/vue.min.js'></script> <style>* { margin: 0; padding: 0;}.bg { width: 300px; height: 400px; position: absolute; top: 50px; left: 100px; border: 1px solid #ccc;}.bg ul li { margin-bottom: 50px;} </style></head><body><p><p class='bg'> <ul><li v-for='item of list' :key='item.id'> <h2>{{ item.name }}</h2> <span v-show='false'>我出現了</span></li> </ul></p><script>const app = new Vue({ el: ’.bg’, data () {return { list: [{ id: 0, name: ’李四’, number: 0},{ id: 1, name: ’張三’, number: 0},{ id: 2, name: ’王五’, number: 0}, ]} }})</script></p></body></html>

我想監聽list 下面的number 是否發生變化,或者大于現在的number。如果number發生變化了, h2下面的span 就會出現。 然后 1秒消失。

但是沒想到怎么去做。 (注意: 哪個number變化就哪個span出現。 不是所有都出現。)

問題解答

回答1:

不錯,應該使用 watch

應該分拆使用組建,我想原汁原味的Vue寫法應該如此:

Vue.component(’list-view’, { props: [’item’], data() { return { is_show: false } }, watch: { ’item.number’: function(newN, oldN) { this.is_show = newN > oldN; }, is_show: function(newStatus) { if (newStatus) {setTimeout(() => this.is_show = false, 1000); } } }, template: ` <li><h2 v-text='item.name'></h2> <span v-show='is_show'>我出現了</span> </li>`});const app = new Vue({ el: ’.bg’, data() { return { list: [{id: 0,name: ’李四’,number: 0 }, {id: 1,name: ’張三’,number: 0 }, {id: 2,name: ’王五’,number: 0 }, ] } }, mounted() { //測試用的 setTimeout(() => { this.$set(this.list[0], ’number’, 1); }, 1000); setTimeout(() => { this.$set(this.list[1], ’number’, 1); }, 2000); setTimeout(() => { this.$set(this.list[2], ’number’, 1); }, 3000); }});

<p> <p class='bg'> <ul> <list-view v-for='item in list' :item='item' :key='item.id'> </list-view> </ul> </p></p>

可以到 https://jsfiddle.net/1rb586dr/2/ 體驗

回答2:

你可以使用watch()屬性

api文檔:vue-vatch

希望可以幫到你,如果還不懂再@我

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 欧美成人免费观看国产 | 国产精品欧美视频另类专区 | 久草免费在线视频观看 | 特级毛片www欧美 | 99精品在线 | 国产高清在线看免费视频观 | 免费一级在线 | 欧美亚洲国产精品 | a毛片免费观看 | 成人欧美午夜视频毛片 | 欧美大片aaa | 欧美亚洲中日韩中文字幕在线 | 成人在线网| 日韩一区二区精品久久高清 | 黄色三级欧美 | 草草影院ccyy免费看片 | 亚洲国产高清视频 | 日韩精品免费一级视频 | 国产特级全黄一级毛片不卡 | 一个人看的日本www的免费视频 | 中文字幕在线乱码不卡区区 | 免费一区二区三区视频狠狠 | 美国一级毛片片aa成人 | 精品视频 久久久 | 一级黄色α片 | 国产精品国产三级国产专 | 91青青国产在线观看免费 | 一本色道久久综合狠狠躁 | 欧美a在线视频 | 欧美精品成人一区二区在线观看 | 怡红院在线a男人的天堂 | 亚洲第一成年免费网站 | 成人毛片在线观看 | 久久精品视频2 | 精品国产免费观看久久久 | 高清日本在线成人免费视频 | 日本在线观看不卡免费视频 | 男人的天堂高清在线观看 | 精品无码久久久久久国产 | 亚州在线视频 | 久久极品 |