vue converts data in view

During the development of Vue projects, it is often necessary to convert data in order to better present it in the view. Vue provides a variety of methods to implement data conversion. These methods make it easy to convert data from one format to another, including the following:

Filters

Filters can be used to transform data in templates. A filter in Vue is essentially a function, which is called in the template using the pipe symbol |. Filters can accept a value as input and return a processed value.

// 定义一个过滤器
Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

// 在模板中使用过滤器
<p>{{ message | reverse }}</p>

In the above example, we defined a filter named reverse in Vue. This filter accepts a string as input and returns the reversed string. In the template, we can use message as input, pass it into the reverse filter through the pipe character for processing, and finally present the processing results in the view.

Computed properties

Computed properties can be used to declare a function in a Vue instance and use it in a template. This function can rely on other state data and automatically recalculate when the state data changes.

// 定义一个Vue实例，并声明一个名为reversedMessage的计算属性
var vm = new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

// 在模板中使用计算属性
<p>{{ reversedMessage }}</p>

In the above example, we declared a computed property named reversedMessage in the Vue instance, which depends on the message status data and message was reversed. In the template, we can directly use the reversedMessage calculated property without manual calculation.

Listener

Listeners can be used to listen for changes in status data so that the view can be updated when the data changes. A listener is essentially a function that is automatically called when state data changes.

// 定义一个Vue实例，并声明一个名为message的状态数据和一个名为reversedMessage的监听器
var vm = new Vue({
  data: {
    message: 'Hello Vue.js!',
    reversedMessage: ''
  },
  watch: {
    message: function (newVal, oldVal) {
      this.reversedMessage = newVal.split('').reverse().join('')
    }
  }
})

// 在模板中使用监听器
<p>{{ reversedMessage }}</p>

In the above example, we declared a state data named reversedMessage and a listener named message in the Vue instance. When message changes, the listener will be automatically called to reverse message and update the value of reversedMessage. In the template, we can use the reversedMessage status data, which will automatically update when the message changes.

Method

Method can be used to declare a function in the Vue instance and use it in the template. This function can perform complex data processing and return the processed results.

// 定义一个Vue实例，并声明一个名为reversedMessage的方法
var vm = new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

// 在模板中使用方法
<p>{{ reversedMessage() }}</p>

In the above example, we declared a method named reversedMessage in the Vue instance, which obtains the message status data and reverses it. In the template, we can use the reversedMessage() method and call this method directly in the template to obtain the processed data.

In short, Vue provides a variety of ways to transform data, including filters, calculated properties, listeners, and methods. We can choose the appropriate method according to specific development needs, and continue to try and optimize during the development process.

The above is the detailed content of vue converts data in view. For more information, please follow other related articles on the PHP Chinese website!