Basic use of computational attributes

Basic Use of computed Computing Attributes

computed: A configuration item provided by Vue

Note: When data changes, instructions and expressions on the page are recalculated. Sometimes irrelevant data changes lead to recalculations all the time, so the computational properties are introduced here.

How to use it?

Computed is the same level as data, and computing attributes are written in computed.

Write like a method;

Use it like attributes.
Features (Attention Points):

1) There must be a return value.

2) You can use known values in data.

3) As long as the data related to the computational attributes change, the computational attributes will be recalculated. No matter how the irrelevant attributes change, the computational attributes will not change.

4) Computing attribute names cannot rename data in data (because data in data is to be used)
When will it be used?

You want to get a new value based on the known value in the data, and the new value will change with the change of the relevant data.

little-demo: Use computational attributes to control the display and hiding of elements

<div id="app">
      <input type="text" v-model="name" />
      <span v-show="isShow">Please input3-6Character</span>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            name: "zs"
        },
        computed: {
            isShow() {
                //When the length of this.name is less than 3 or more than 6, the prompt content is displayed (I change according to the change of name)
                if (this.name.length >= 3 && this.name.length <= 6) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    });
</script>

Demonstration problem: To control the display and hiding of span by changing the value of num

Question:
What we want is that when we click, num changes, and span displays.
But now, without clicking the button, num hasn't changed, typing text in the text box, isShow function is also called, which is not what we want.
This is because: once the data in the data changes, all instructions and expressions in the page will be recalculated, which greatly affects performance!

<div id="app">
      <input type="text" v-model="name" />
      <span v-show="isShow">I showed up.</span>
      <h1>{{ num }}</h1>
      <button @click="fn">click++</button>
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            name: "zs",
            num: 100
        },
        methods: {
            fn() {
                this.num++;
            }

            //   isShow() {
            //     console.log("I changed");
            //     return this.num > 100;
            //   }
        },
        //Solution: Computing attributes are provided in vue
        computed: {
            isShow() {
                console.log("I have changed.");
                return this.num >= 105;
                //Computational attributes are only related to related attributes, and only when the related attributes change, will the computational attributes change. (This is the result we want.)
            }
        }
    });
</script>

Think: Why do we have computational attributes?

Posted by HockeyDevil07 on Mon, 15 Apr 2019 21:30:32 -0700

Programmer Group

Basic use of computational attributes

Basic Use of computed Computing Attributes

Hot Keywords