Introduction to Computed Properties in Vue

1. What is a calculated property?

Expressions in templates are very convenient, but they are designed primarily for simple calculations. Putting too much logic in a template can make it cumbersome and difficult to maintain.

For example:

<div id="app">
  {
<!-- -->{ message.split('').reverse().join('') }}
</div>

At this point, the template is no longer just a simple declarative logic. Instead, directly reverse the string in the interpolation expression. If you use the reversed string in multiple places, it will be troublesome to write it this way and increase the consumption. So, for any complex logic, you should use computed properties.

2. Syntax of computed properties

computed{

function () {return //Must return a value. }Usually this function is a get function}

3. Examples

For the above example, we can write:

<div id="app">
        <p>Original string: {
<!-- -->{mes}}</p>
        <p>Reversed string: {
<!-- -->{reverseMes}}</p>
    </div>

let vm = new Vue({
            el:'#app',
            data:{
                mes:'sayhello'
            },
            computed: {
                reverseMes(){
        // The calculated attribute must have a return value return this.mes.split('').reverse().join('')
                }
            }
        })

View the results:

Here we define a function in computed property of the vue instance. The return value of the function is the result we need, which can be called directly in the interpolation expression and rendered.

For example, by calculating the property, the first letter of the word is capitalized:

<div id="app">
        <p>Original string: {
<!-- -->{name}}</p>
        <p>Capitalize the first letter: {
<!-- -->{toUpperCase}}</p>
    </div>

In the computed property of the Vue instance, customize our calculated property by getting the first character of the string and converting it to uppercase, and then concatenating it with the remaining characters after the split:

el:"#app",
            data:{
                name:'tom'
            },

            // Computed properties computed:{
            // Custom calculated property toUpperCase(){
                return this.name.charAt(0).toUpperCase().concat(this.name.slice(1,3))
              }
            }

The output is:

There are two very practical tips for calculated properties that are easily overlooked: one is that calculated properties can depend on other calculated properties; the other is that calculated properties can depend not only on the data of the current Vue instance, but also on the data of other instances.

For example:

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
let vm1 = new Vue({
            el:'#app1',
            data:{
                mes:'hello'
            }
        })

        let vm2 = new Vue({
            el:'#app2',
            computed: {
                reverseMes(){
                    // Use the mes in the data center of the instance vm1 to reverse the string return vm1.mes.split('').reverse().join('')
                }
            }
        })

View the results:

The data in the instance vm1 and vm2 can also be used to calculate the properties

In addition to being used in interpolation expressions, custom computed properties can also be used in v-bind : attribute binding to perform some style changes, etc.

This is the end of this article about the introduction of calculated properties in Vue. For more relevant Vue calculated properties content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!