vue如何獲取值

這篇文章主要介紹了vue如何獲取值的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue如何獲取值文章都會(huì)有所收獲，下面我們一起來看看吧。

在Vue中獲取值主要有兩種方式，一種是使用指令，另一種是使用計(jì)算屬性。

使用指令獲取值

Vue中提供了一些指令，可以方便地獲取頁面上的input、select等類型的值。

v-model指令

v-model指令是Vue中最常用的獲取值的指令，它可以用于綁定表單元素的值，并在用戶輸入時(shí)自動(dòng)更新數(shù)據(jù)。例如，在下面的代碼中，我們使用v-model指令將輸入框的值綁定到了data對象中的message屬性：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

現(xiàn)在，當(dāng)你在輸入框中輸入文本時(shí)，Vue會(huì)在后臺(tái)自動(dòng)更新data中的message屬性值，同時(shí)在p標(biāo)簽中顯示出來。

v-bind指令

v-bind指令可以用來在模板中動(dòng)態(tài)地綁定一個(gè)或多個(gè)屬性。例如，在下面的代碼中，我們使用v-bind綁定了a標(biāo)簽的href屬性到data對象中的url屬性：

<div id="app">
  <a v-bind:href="url">Vue.js</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

v-on指令

v-on指令可以用來綁定事件。例如，在下面的代碼中，我們使用v-on綁定了button標(biāo)簽的click事件，當(dāng)按鈕被點(diǎn)擊時(shí)，Vue會(huì)自動(dòng)調(diào)用data對象中的increment方法：

<div id="app">
  <button v-on:click="increment">{{ count }}</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

使用計(jì)算屬性獲取值

在Vue中，我們還可以使用計(jì)算屬性來獲取值。計(jì)算屬性是一種具有緩存機(jī)制的屬性，它的值基于對其他數(shù)據(jù)的計(jì)算而來。當(dāng)它所依賴的數(shù)據(jù)發(fā)生變化時(shí)，它會(huì)自動(dòng)重新計(jì)算。

計(jì)算屬性的基本用法

例如，在下面的代碼中，我們聲明了一個(gè)名為reversedMessage的計(jì)算屬性，它的值是data對象中的message屬性的字符串反轉(zhuǎn)：

<div id="app">
  <input v-model="message">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

計(jì)算屬性的get和set方法

除了可以通過get方法來定義計(jì)算屬性的值之外，我們還可以通過set方法來定義計(jì)算屬性的值。例如，在下面的代碼中，我們聲明了一個(gè)名為fullName的計(jì)算屬性，它的值是data對象中的firstName和lastName屬性的拼接。當(dāng)我們修改fullName的值時(shí)，Vue會(huì)自動(dòng)調(diào)用set方法，從而同時(shí)更新data對象中的firstName和lastName屬性：

<div id="app">
  <input v-model="firstName">
  <input v-model="lastName">
  <p>{{ fullName }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

關(guān)于“vue如何獲取值”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue如何獲取值”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。