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

This article mainly explains "what are the common instructions in Vue". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the common instructions in Vue"?

The instruction is to use data to drive DOM behavior and simplify DOM operation. The common instructions are as follows

V-text innertext, unable to parse html tags in text

V-html innerhtml, which parses html tags in text

V-show controls the display and hiding of elements

V-if, v-else-if and v-else display the corresponding elements only when the conditions are met.

V-for traversal array, object

V-bind unidirectional data binding

V-model bidirectional data binding

V-on event binding

Demo v-text, v-html, v-show new Vue ({el:'#div1', template:'

', / / equivalent to'

{{info}}

'data:function () {return {info: "are you ok?" / / if it contains html tags and is not parsed, it will be output directly as text}); new Vue ({el:'#div2', template:')

', data:function () {return {info: "are you ok?" / / parses the html tag inside); new Vue ({el:'#div3', template:'are you ok?

', / / specify a variable, the variable name does not have to be display, anything is fine. Display does not refer to the css attribute name data:function () {return {display:true / / Boolean value, true-- shows, false-- does not show (hidden), no longer occupies space}) At this point, I believe you have a deeper understanding of "what are the commonly used instructions in Vue"? you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.