Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to achieve computational attributes in vue", the content is detailed, the steps are clear, the details are handled properly, I hope that this article "how to achieve computational attributes in vue" article can help you solve your doubts, following the editor's ideas slowly in-depth, let's learn new knowledge.

What are Computational Properties

Expressions within templates are very convenient, but they are originally designed for simple operations. Putting too much logic in the template can make the template overweight and difficult to maintain. For example:

{{message.split (') .reverse () .join (')}}

The expression here contains three operations, which is not very clear, so when you encounter complex logic, you should use Vue's special evaluation attribute computed to deal with it.

Computational attributes (computed) are used to deal with complex logic

Computed: {}

The options for computed as vue are fixed

Example:

{{mes}}

{{count}}

New Vue ({el:'#itany', data: {mes:'hello vue'}, computed: {count:function () {/ / cutting and flipping splicing return this.mes.split (''). Reverse (). Join ('- -)}})

The output is as follows:

Hello vue

Vue---hello

Practice

Requirement: click the button button to change the number according to the corresponding price

Image 2.png

The code is as follows:

Summation

{{arr}}

New Vue ({el:'#itany', data: {name: {price:2,count:0}, names: {price:4,count:0}, see:true}, methods: {num:function () {this.name.count++, this.names.count++}}) Computed: {arr:function () {return this.name.price*this.name.count+this.names.price*this.names.count}) read here This article "how to implement Computational attributes in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.