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("數據發生了變化1")this.changeInformation = true;},

關于Vue中keyup的補充：

事件代碼事件描述

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

其他監測數據變化方式：

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

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

computed用來監控自己定義的變量，該變量不在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('')}}

計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。