How to get the value in vue

Vue is a popular web development framework that provides syntactic sugar for two-way binding. In Vue, we can easily obtain the data on the page and respond to its changes in real time. This article will explore how to get values ​​in Vue.

There are two main ways to get values ​​in Vue, one is to use instructions, and the other is to use calculated properties.

Use instructions to obtain values

Vue provides some instructions to easily obtain values ​​of input, select and other types on the page.

v-model directive

The v-model directive is the most commonly used directive to obtain values ​​in Vue. It can be used to bind the values ​​of form elements and automatically update data when the user inputs . For example, in the following code, we use the v-model directive to bind the value of the input box to the message property in the data object:

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

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

Now, when you enter text in the input box, Vue will The message attribute value in data is automatically updated in the background and displayed in the p tag.

v-bind directive

The v-bind directive can be used to dynamically bind one or more attributes in a template. For example, in the following code, we use v-bind to bind the href attribute of the a tag to the url attribute in the data object:

<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 directive

v-on directive Can be used to bind events. For example, in the following code, we use v-on to bind the click event of the button label. When the button is clicked, Vue will automatically call the increment method in the data object:

<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++
    }
  }
})

Use calculated properties to obtain Value

In Vue, we can also use computed properties to get values. A computed property is a property with a caching mechanism whose value is based on calculations of other data. It is automatically recalculated when the data it relies on changes.

Basic usage of computed properties

For example, in the following code, we declare a computed property named reversedMessage, whose value is the string inverse of the message property in the data object. Transfer:

<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('')
    }
  }
})

Get and set methods of calculated properties

In addition to defining the value of a calculated property through the get method, we can also define the value of a calculated property through the set method. For example, in the code below, we declare a computed property called fullName whose value is the concatenation of the firstName and lastName properties in the data object. When we modify the value of fullName, Vue will automatically call the set method to update the firstName and lastName properties in the data object at the same time:

<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]
      }
    }
  }
})

Summary

In Vue, we can use v- Instructions such as model, v-bind, and v-on are used to obtain the data on the page. You can also use calculated properties to calculate the data to generate new values. Through these methods, Vue provides a very convenient way to obtain data, allowing us to easily respond to various business needs.

The above is the detailed content of How to get the value in vue. For more information, please follow other related articles on the PHP Chinese website!