詳解vue 實例方法和數(shù)據(jù)
1.vm.$set
問題描述:
如何在不通過循環(huán)數(shù)據(jù)給list數(shù)據(jù)添加一個showMore屬性,并且在moreFun中改變這個新增屬性的值,并實現(xiàn)雙向綁定?
<template> <div id="app"> <div class="demo"> <ul> <template v-for="(v,index) in list"> <li>{{v.name}}</li> <div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div> </template> </ul> </div> </div> </template> <script> export default { name: 'app', data() { return { list: [{ name: '小穎' }, { name: '仔仔' }, { name: '黑妞' }, { name: '土豆' }] } }, methods: { moreFun(index) { console.log(this.list); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
一開始小穎并不知道怎么做,而且小穎覺得
<div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div>
這段代碼肯定會報錯,然而當小穎寫上后發(fā)現(xiàn),并沒有,后來那位帥鍋告訴我,看看vue的 vm.$set 小穎看后將moreFun方法寫為:
moreFun(index) { this.$set(this.list[index], 'showMore', true); console.log(this.list); }
然后就達到小穎想要的結(jié)果啦。小穎當時遇到的問題類似于這樣的:
<template> <div id="app"> <div class="demo"> <ul> <template v-for="(v,index) in list"> <li>{{v.name}}</li> <div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div> </template> </ul> </div> </div> </template> <script> export default { name: 'app', data() { return { list: [{ name: '小穎' }, { name: '仔仔' }, { name: '黑妞' }, { name: '土豆' }] } }, mounted: function() { this.list.forEach(function(element, index) { element.showMore = false; }); }, methods: { moreFun(index) { this.list[index].showMore = true; console.log(this.list); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
問題:當執(zhí)行完moreFun方法后,雖然list中的showMore屬性的值變成了true,但是
<div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div>
按鈕 展示更多 仍然顯示著,這是因為,如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新。
所以后來小穎就將showMore直接添加到list中,然后就好啦。現(xiàn)在想想其實用個vm.$set就解決啦。
2.vm.$watch
用法:
觀察 Vue 實例變化的一個表達式或計算屬性函數(shù)。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。表達式只接受監(jiān)督的鍵路徑。對于更復雜的表達式,用一個函數(shù)取代。
注意:在變異 (不是替換) 對象或數(shù)組時,舊值將與新值相同,因為它們的引用指向同一個對象/數(shù)組。Vue 不會保留變異之前值的副本。
<template> <div id="app"> <div class="demo"> <input type="text" class="num1" v-model="num1"> <label class="sign">-</label> <input type="text" class="num2" v-model="num2"> <label class="sign">=</label> <label class="result">{{resultNum}}</label> </div> </div> </template> <script> export default { name: 'app', data() { return { num1: 1, num2: 5, resultNum: null } }, watch: { num1: function() { var _num1 = parseInt(this.num1); var _num2 = parseInt(this.num2); this.resultNum = _num1 - _num2; }, num2: function() { var _num1 = parseInt(this.num1); var _num2 = parseInt(this.num2); this.resultNum = _num1 - _num2; } }, mounted: function() { var _num1 = parseInt(this.num1); var _num2 = parseInt(this.num2); this.resultNum = _num1 - _num2; } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } input.num1, input.num2 { width: 100px; } label.sign { font-size: 30px; vertical-align: -3px; } label.result { font-size: 20px; } </style>
3.vm.$delete
用法:
這是全局 Vue.delete 的別名。
<template> <div id="app"> <div class="demo"> <ul> <template v-for="(v,index) in list"> <li>{{v.name}}</li> <li>{{v.age}}</li> <button @click="deleteFun(index)">delete</button> </template> </ul> </div> </div> </template> <script> export default { name: 'app', data() { return { list: [{ name: '小穎', age:22 }, { name: '仔仔', age:1 }, { name: '黑妞', age:1 }, { name: '土豆', age:1 }] } }, methods: { deleteFun(index) { this.$delete(this.list[index], 'age'); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
總結(jié)
以上所述是小編給大家介紹的vue 實例方法和數(shù)據(jù),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化)
這篇文章主要介紹了從0到1搭建element后臺框架優(yōu)化篇(打包優(yōu)化),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05Vue+ECharts+高德地圖API實現(xiàn)天氣預報數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化,我們可以理解為從宏觀角度來看一眼就能看出來整個數(shù)據(jù)的占比,走向,對于數(shù)據(jù)可視化,很多互聯(lián)網(wǎng)公司是很看重這一塊的,包括大廠,本就將給大家介紹如何通過Vue+ECharts+高德地圖API實現(xiàn)天氣預報數(shù)據(jù)可視化2023-06-06解決antd的Form組件setFieldsValue的警告問題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10el-select如何獲取下拉框選中l(wèi)abel和value的值
在開發(fā)業(yè)務場景中我們通常遇到一些奇怪的需求,例如el-select業(yè)務場景需要同時獲取我們選中的label跟 value,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value的值,需要的朋友可以參考下2022-10-10vue watch監(jiān)聽取不到this指向的數(shù)問題
這篇文章主要介紹了vue watch監(jiān)聽取不到this指向的數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09