Vue中使用keyup

<el-form-item label="姓名:" prop="name"><el-inputtype="text"v-model="userInfo.name"autocomplete="off"@keyup.native="changeUserInformation"></el-input></el-form-item>

注意：在element-ui中需要@keyup.native，在普通的input中只需要 @keyup=“changeUserInformation”
在script中

methods: {changeUserInformation(){console.log("數(shù)據(jù)發(fā)生了變化1")this.changeInformation = true;},

關(guān)于Vue中keyup的補(bǔ)充：

事件代碼事件描述

@keyup.enter	回車按鍵松開觸發(fā)
@keyup.left	左鍵按鍵松開觸發(fā)
@keyup.right	右鍵按鍵松開觸發(fā)
@keyup.up	上鍵按鍵松開觸發(fā)
@keyup.down	下鍵按鍵松開觸發(fā)
@keyup.delete	刪除鍵松開觸發(fā)

其他監(jiān)測數(shù)據(jù)變化方式：

vue中提供了watch方法，它用于觀察vue實列上的數(shù)據(jù)變動，來響應(yīng)數(shù)據(jù)的變化。注意這種方法對我沒有用處！因為我的是userInfo.name，如果v-model="userInfo"可能就能使用了（不過我沒試過！）；watch主要用于監(jiān)控vue實例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個變量，也可以是一個對象

data(){return {example0:"",example1:"",}}, watch:{example0(newVal,oldVal){//監(jiān)控單個變量……}， example2(newVal,oldVal){//監(jiān)控對象……}， }

computed用來監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義。

<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p> </div> computed: {// 計算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實例return this.message.split('').reverse().join('')}}

計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

我之前使用過 AngularJS，所以對watch很熟悉。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調(diào)。

后記：每天將自己工作和學(xué)習(xí)中遇到的問題和好的方法記錄下來。

總結(jié)

以上是生活随笔為你收集整理的Vue中监测数据变化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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