The mustache syntax {{}} is used for binding element tag content

1. Instruction usage

  • V-once, no value, no need for =
<div v-once></div>

Copy the code
  • V – HTML, url: ‘https:www.baidu.com’
<div v-html="url"></div>
Copy the code
  • v-for, goods:[‘today’,’ok’, ‘good’]
<ul>
 <li v-for='item in goods'>{{item}}</li>
</ul>
Copy the code
  • “V-text,” “mustache” grammar
< div > {{message}} < / div > = = equivalent to < div v - text = "message" > < / div >Copy the code
  • V-pre, show it as it is, don’t parse it
<div>{{message}}</div>Copy the code
  • A v-cloak displays the property until it is parsed. after it is parsed. the property disappears
<div v-cloak>{{message}}</div>
//css
<style>
    [v-cloak]: {
        display: 'none'
    }
</style>
Copy the code

2. v-bind

Dynamically bound attributes (syntax sugar: V-bind: SRC === equivalent to: SRC)
Img URL: SRC ="imgUrl"/> <a V-bind :href="aHref"> Baidu </a> Variables: imgUrl: 'HTTP :www.baidu.com', aHref:' HTTP :www.baidu.com'Copy the code
Dynamically bound class
  • Object syntax
<h2 v-bind:class=" Boolean1, class name 2 Boolean2}">{{message}}</h2> boolean2 is a parameter, <h2 v-bind:class="getClass()">{{message}}</h2> getClass: function () {return {class name 1: This.boolean1, class name 2: this.boolean2}}Copy the code
  • Array syntax is used sparingly
[' active ', 'line'] string <h2 V-bind :class="[active, line]">{{message}}</h2>Copy the code
Dynamically bound style
  • Object syntax
<h2 :style="{fontSize: '50px', color: 'red'}">{{message}}</h2> Attributes can be dynamically set to a variableCopy the code
  • Array syntax
<h2 :style="[baseStyle, overStyle]">{{message}}</h2>

baseStyle: {color: 'red'}
Copy the code