iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

Vue 與 Element UI 兩三事系列 第 3

Vue 與 Element UI 兩三事#3 Vue 的資料操作方式

正文:
前兩天我們透過了 vue 內的 data 來將資料餵給視圖中,然而我們也會需要對資料去進行編輯和監控,因此今天要介紹的即為資料的編輯方式

當我們要對資料進行更動,input element 總是不會缺席,不同於文字,我們需要將其更動的變數綁在 v-model 此屬性上,當 input element 進行更動時,此變數也會即時更新

<input v-model="inputValue" type="number">

data:{
    inputValue: 0
}

如同 html 中事件除了寫在行內也可以寫額外的方法來進行呼叫,而在 Vue 中我們需要將函式寫在 vue 內的 methods 上

<div id="app">
    <button @click="addCount()">add count</button>
    <p>count: {{count}}</p>
</div>
let app = new Vue({
    data: {
        count
    },
    methods: {
        addcount: function(){
        this.count += 1
        }
    }
}

這邊特別註明一下,我們這邊的函式現在都是掛在 vue 內的,因此我們使用 this 得到的是 vue 內的資料,因此這邊的 this.count 也等同於 app.count

而當我們需要對原始資料進行包裝又不希望更改它時可以使用 computed 此方法,computed 可以偵測其內部資料是否有進行更動,當有更動時就返回新的值,這邊以匯率來進行演示

<span>台幣 {{TWD}} 日幣 {{JPY}} 美金 {{USD}}</span>

vue實例:
data:{
    TWD:100
},
computed: {
    JPY: function(){
        return this.TWD*2684/10000
    },
    USD: function(){
        return this.TWD*29.09
    }
}

而後我們就可以得到 台幣 100 日幣 26.84 美金 2909 這樣的資訊囉

然而 computed 還是會遇到些問題,譬如當數據為非同步獲得或修改時在等待期間會出現問題,這時候我們可以透過 watch 此方法來更改數值,此方法會需要一個與他同名的變數

<input v-model="TWD" type="number">
<div>台幣 {{TWD}} 日幣 {{JPY}} 美金 {{USD}}</div>

data: {
    TWD: 100.0,
    JPY: 0,
    USD: 0
},
watch: {
    TWD: function(){
        this.JPY = this.TWD*2684/10000
        this.USD = this.TWD*29.09
    }
}

https://ithelp.ithome.com.tw/upload/images/20200903/201094031SUEQ8EJpZ.png
這邊只是演練一下 watch 的使用方法,根據官方文件指出,如非必要建議使用 computed 此計算方法,而非使用 watch 此命令式方法去進行資料監控。

嘮叨一下:
今天總算品嘗到了 200 元的果醬奶油厚片,位於台北市政府一號捷運出口旁,各方面來說真的都是不簡單啊...


上一篇
Vue 與 Element UI 兩三事#2 Virtual DOM 的操作
下一篇
Vue 與 Element UI 兩三事#4 判斷式與迴圈
系列文
Vue 與 Element UI 兩三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言