Vue. js computed, filter, get, set usage and differences, vue. jscomputed

Vue. js computed, filter, get, set usage and differences, vue. jscomputed

1. The computed method of vue. js:

Processing of complex logic is based on dependency cache. When dependency changes, the value is retained. Methods can also achieve the same effect, but methods re-calls the execution during re-rendering. In terms of performance, computed is better than methods, and methods is available when no cache is required.

Instance 1: computed and methods implement flip string

<Template> <div> <input v-model = "message"> <p> original string: {message }}</p> <p> calculate and reverse the string: {reversedMessage }}</p> <p> Use method to reverse the string: {reversedMessage2 ()}} </p> </div> </template> <script> export default {data () {return {message: 'runoob123! '}}, Computed: {// getter reversedMessage of the calculation attribute: function () {// 'eas' points to the vm instance return this. message. split (''). reverse (). join ('') }}, methods: {reversedMessage2: function () {return this. message. split (''). reverse (). join ('') }}</script>

Execution result:

Example 2: get () and set () usage of computed

<Template> <div> <select v-model = "site"> <option value = "Google http://www.google.com"> Google http://www.google.com </option> <option value = "baidu http://www.baidu.co"> baidu http://www.baidu.com </option> <option value = "Netease http://www.163.com"> Netease http://www.163.com </option> </select> <p> name: {name }}</p> <p> url: {url }}</p> </div> </template> <script> export default {data () {return {name: 'Google ', url: 'http: // www.google.com'}, computed: {site: {// getter get: function () {return this. name + ''+ this. url}, // setter set: function (newValue) {let names = newValue. split ('') this. name = names [0] this. url = names [names. length-1] }}}</script>

Execution result:

2. fliter method of vue. js filter:

A filter is a simple function that returns the processing result after processing the returned data. However, the vue2.0 version is removed. The alternative method is to write the function in methods.

Instance:

<template> <div> <input v-model="filterText"/> <ul> <li v-for="item in obj"> <span>{{myfilter(item.label)}}</span> </li> </ul> </div></template><script>export default { data () { return { obj: [ {value: 0, label: 'beijing'}, {value: 1, label: 'shanghai'}, {value: 2, label: 'guangdong'}, {value: 3, label: 'zhejiang'}, {value: 4, label: 'jiangshu'} ], filterText: '' } }, methods: { myfilter (value) { if (value.indexOf(this.filterText) > -1) { return value } } }}</script>

Execution result:

3. get and set methods of vue. js:

In vue, the data attribute can respond to data changes by converting the data attribute to getter/setter. In vue2.0, get () and set () are used in computed computing attributes, in the preceding computed instance. In addition, the vm. $ set (object, key, value) inherited from vue1.0 is used to dynamically monitor data elements. This method can be used to add array attributes and respond after an instance is created.

<Template> <div> <input v-model = "opt" @ blur = "add () "/> <ul> <li v-for =" item in arr ">{{ item }}</li> </ul> </div> </template> <script> export default {data () {return {arr: ['beijing', 'shanghai', 'guangdong ', 'shenzhen'], opt: ''}}, methods: {add () {this. $ set (this. arr, this. arr. length, this. opt) }}</script>

Execution result:

The above vue. the usage and differences of JavaScript computed, filter, get, and set are all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the customer's house.