What instructions are used to control the display and hiding of elements in vue?

In vue, you can control the display and hiding of elements through the "v-show" command. This command is just a simple CSS-based switch. You can control the display and hiding of elements by setting the display style attribute of the DOM element.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

v-show instruction

The v-show instruction controls the display attribute of the element to determine whether to display it. When the attribute value of v-show is true, the element Display, otherwise it will not be displayed

v-show switches the displayCSS attribute of the element based on the true or false value of the expression (judged based on the Boolean value derived from the expression)

Usage of v-show

1. Determine whether an element is displayed or hidden

<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--right"></i></el-button>

According to whether the parameter list.power in the interface is equal to 1, if it is equal to 1, it is " true", otherwise it is "false", and then the v-show instruction is displayed when it is equal to true and hidden when it is false.

2. Ternary operator judgment

<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="&#39;http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url=&#39;+item.urlai">AI</a>

In fact, this can also be abbreviated to the first form

<a class="warn" v-show="!item.ai == null" :href="&#39;http://172.168.80.149:14081/gateway/upload/upload/downloadFile?url=&#39;+item.urlai">AI</a>

This is simpler

[Related recommendations : "vue.js tutorial"】

The above is the detailed content of What instructions are used to control the display and hiding of elements in vue?. For more information, please follow other related articles on the PHP Chinese website!