詳解vue 實(shí)例方法和數(shù)據(jù)
1.vm.$set
問題描述:
如何在不通過循環(huán)數(shù)據(jù)給list數(shù)據(jù)添加一個(gè)showMore屬性,并且在moreFun中改變這個(gè)新增屬性的值,并實(shí)現(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>
這段代碼肯定會(huì)報(bào)錯(cuò),然而當(dāng)小穎寫上后發(fā)現(xiàn),并沒有,后來那位帥鍋告訴我,看看vue的 vm.$set 小穎看后將moreFun方法寫為:
moreFun(index) { this.$set(this.list[index], 'showMore', true); console.log(this.list); }
然后就達(dá)到小穎想要的結(jié)果啦。小穎當(dāng)時(shí)遇到的問題類似于這樣的:
<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>
問題:當(dāng)執(zhí)行完moreFun方法后,雖然list中的showMore屬性的值變成了true,但是
<div v-show="!v.showMore"> <button @click="moreFun(index)">展示更多</button> </div>
按鈕 展示更多 仍然顯示著,這是因?yàn)?,如果在?shí)例創(chuàng)建之后添加新的屬性到實(shí)例上,它不會(huì)觸發(fā)視圖更新。
所以后來小穎就將showMore直接添加到list中,然后就好啦?,F(xiàn)在想想其實(shí)用個(gè)vm.$set就解決啦。
2.vm.$watch
用法:
觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)?;卣{(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對(duì)于更復(fù)雜的表達(dá)式,用一個(gè)函數(shù)取代。
注意:在變異 (不是替換) 對(duì)象或數(shù)組時(shí),舊值將與新值相同,因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue 不會(huì)保留變異之前值的副本。
<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í)例方法和數(shù)據(jù),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue 地圖可視化 maptalks 篇實(shí)例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05從0到1搭建element后臺(tái)框架優(yōu)化篇(打包優(yōu)化)
這篇文章主要介紹了從0到1搭建element后臺(tái)框架優(yōu)化篇(打包優(yōu)化),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化,我們可以理解為從宏觀角度來看一眼就能看出來整個(gè)數(shù)據(jù)的占比,走向,對(duì)于數(shù)據(jù)可視化,很多互聯(lián)網(wǎng)公司是很看重這一塊的,包括大廠,本就將給大家介紹如何通過Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化2023-06-06Vue3封裝組件完整實(shí)例(帶回調(diào)事件)
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下2023-06-06解決antd的Form組件setFieldsValue的警告問題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10el-select如何獲取下拉框選中l(wèi)abel和value的值
在開發(fā)業(yè)務(wù)場(chǎng)景中我們通常遇到一些奇怪的需求,例如el-select業(yè)務(wù)場(chǎng)景需要同時(shí)獲取我們選中的label跟 value,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value的值,需要的朋友可以參考下2022-10-10Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)仿iPhone懸浮球的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03vue watch監(jiān)聽取不到this指向的數(shù)問題
這篇文章主要介紹了vue watch監(jiān)聽取不到this指向的數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09