Detailed explanation of Mustache interpolation syntax and v-bind instruction in Vue

This article will introduce to you the Mustache interpolation syntax and v-bind instruction in Vue. I hope it can help you!

1. Mustache interpolation syntax

⭐⭐mustache syntax: It means "beard", It is said that it is because the embedded tag looks like a beard {{}} (I don’t think it looks like O(∩_∩)O haha~)

It is the most commonly used to display data in a template. The syntax is "Mustache" syntax (double braces) text interpolation

• data The returned object is added to Vue's responsive system; (Learning video sharing: vue video tutorial)
• When the data in data changes, the corresponding content will also be updated.
• Mustache can not only be an attribute in data, but also a JavaScript expression

⭐⭐
We can write:

• Value
• Expression
• Ternary expression
• Call the function in methods

<div id="app">
      <h2>{{message}}</h2>
      <h2>当前计数：{{counter}}</h2>

      <!-- 2.表达式 -->
      <h2>计数双倍：{{counter*2}}</h2>
      <h2>展示的信息:{{info.split(" ")}}</h2>

      <!-- 3.三元表达式 -->
      <h2>{{age>=18?"成年人" : "未成年人"}}</h2>

      <!-- 4.调用methods中函数 -->
      <h2>{{formatDate(time)}}</h2>
</div>

2. v-bind Binding attributes

2.1.v-bind binding basic attributes

⭐⭐
　　One-way binding v-bind: data It can only flow from data to the page

  We can use v-bind to bind attributes, such as dynamically binding the href attribute of the a element and the src attribute of the img element

 v-bind is used to

• Bind one or more attribute values
• Pass props value to another component**(props: equivalent to the input of a component, followed by You will learn)
  
  v-bind:href can be written as: href This is the syntactic sugar of v-bind

<div id="app">
      <!-- 1.绑定img的src属性 -->
      <button @click="switchImage">切换图片</button>
      <img v-bind:src="showImgUrl" alt="" />
      <!--语法糖 v-bind: = :  -->
      <!-- 2.绑定a的href属性 -->
      <a v-bind:href="href">百度一下</a>
    </div>

2.2.v-bind binding class

⭐⭐

1. Basic binding class

<h2 :class="classes">Hello World</h2>

2. Dynamic class can write object syntax

<button :class="isActive ? &#39;active&#39;:&#39;&#39;" @click="btnClick">
我是按钮
</button>

3.Object syntax Basically use

<button :class="{active:isActive}" @click="btnclick">我是按钮</button>

4. Multiple key-value pairs of object syntax, dynamically bound classes can be used at the same time as ordinary classes

• We can give v-bind: class is an object used to dynamically switch classes
• Of course, v-bind:class can also coexist with ordinary class attributes

<button class="abc cba" :class="getDynamicClasses" @click="btnClick">
我是按钮
</button>

2.3.v-bind binding Define style

⭐⭐

1. Ordinary html writing method

<h2 style="color: aqua; font-size: 30px">hhh</h2>

2. Some values ​​in style come from data

Dynamic binding style, followed by the object type

<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>

3. Dynamic binding attribute, this attribute is an object

<h2 :style="objStyle">hhhhh</h2>

2.4.v-bind binding attribute name

⭐⭐Bind the attribute name in data

Use when the attribute name is not fixed: [attribute name] = "value"

<div id="app">
      <h2 :[name]="aaaa">Hello World</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            name: "class",
          };
        },
      });
      app.mount("#app");

2.5.v-bind directly binds the object

⭐⭐Input an object, the object comes from data, all attributes of an object, bind to all attributes on the element

<div id="app">
      <h2 :name="name" :age="age" :height="height">Hello world</h2>
      <--直接绑定一个对象，一步到位-->
      <h2 v-bind="infos"></h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            infos: { name: "kk", age: 18, height: 1.7 },
            name: "kk",
            age: 18,
            height: 1.7,
          };
        },
      });
      app.mount("#app");

[Related video tutorial recommendations: vuejs entry tutorial, web front-end entry]

The above is the detailed content of Detailed explanation of Mustache interpolation syntax and v-bind instruction in Vue. For more information, please follow other related articles on the PHP Chinese website!