Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how to add and remove vue attributes according to the conditions. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Judge the addition and removal of attributes according to the conditions

Write a list, and then want to add a loading style in the process of querying the data, you need to add a loading attribute, but after adding it, you will directly display loading.

Solution: loading = isLoading

You need to register isLoading as the boolean type below, as follows:

IsLoading:false/true

Then change it to false at the beginning of the query, and change to false after the query result comes out.

Conditional judgment statement v-if for this.isLoading = truethis.isLoading = falseVue

V-if instruction for conditional judgment

Code example: using v-if directives in elements

V-if directivevar vm = new Vue ({el:'#app', data: {flag:true}, methods: {}})

Here, the v-if instruction will decide whether to insert an h4 element based on the value of the expression flag (true or false).

V-else

You can add a "else" block to v-if with the v-else directive

Code example: using v-if, v-else instructions in an element

Yes Novar vm = new Vue ({el:'#app', data: {flag:true}, methods: {}})

Here, the vripifforce vmurelse instruction will decide whether to insert the h4 element and the value in the element based on the value of the expression flag (true or false).

V-else-if

V-else-if was added in 2.1.0 as an else-if block for v-if. It can be used many times in chain.

Code example: using v-if, v-else, v-else-if instructions in an element

Jackson Lay Yangvar vm = new Vue ({el:'#app', data: {star:Jackson}, methods: {}})

V-else and v-else-if must follow v-if or v-else-if.

V-show

The effect of v-show is similar to that of v-if; but there is a big difference in nature.

Code example: the difference between v-if and v-show

V-if directive v-show directive var vm = new Vue ({el:'#app', data: {flag:true}, methods: {toggle () {this.flag =! This.flag;}); the difference between v-if and v-show

Difference one:

V-if is added dynamically. When the value is false, the element is completely removed, that is, DOM does not exist.

V-show only hides / shows. When the value is false, the element still exists in DOM. If its original style is set to display:none, it will not be displayed properly.

Difference two:

V-if has high handoff performance consumption.

V-show has a high initial rendering consumption

Why to use VueVue is a friendly, multi-purpose and high-performance JavaScript framework, using vue can create a more maintainable and testable code base, Vue allows you to split a web page into reusable components, each component contains its own HTML, CSS, JavaScript, to render the corresponding place in the web page, so more and more front-end developers use vue.

The above is the editor for you to share the vue how to judge the addition and removal of attributes according to the conditions, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to 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.