The use of vue directive v-bind and points to note

The use of vue directive v-bind and points to note

1. v-bind: can bind some data to the attributes of the element

 <div id="app">

    <p v-bind:title="message" v-bind:id="pId">I am a p tag</p>

 </div>

<script src="./js/vue.js"></script>

          <script>

            let vm = new Vue({

                el:"#app",

                data:{

                    message: "I am the title value of the p tag",

                    pId: "This is a random ID"

                }

            })

The output is:

2. v-bind: can be abbreviated as: It is recommended to write the colon directly

<div id="app">

    <p :title="message" :id="pId">I am a p tag</p>

 </div>

<script src="./js/vue.js"></script>

          <script>

            let vm = new Vue({

                el:"#app",

                data:{

                    message: "I am the title value of the p tag",

                    pId: "This is a random ID"

                }

            })

The output is the same as above

3. v-bind: splicing of instruction expressions,

If you want to concatenate expressions, the concatenated strings must be wrapped in quotes, otherwise they will be parsed as variables.

Without quotes:

Error : [Vue warn]: Property or method "This is an additional id" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Add quotes:

<p title="200" :title="message" :id="pId+'This is the additional id'">I am the p tag</p>

Output:

This is the end of this article about the use of v-bind and the points to pay attention to. For more information about the use and points to pay attention to of v-bind, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of V-bind directive in VueJs
  • Detailed explanation of the basic usage of v-bind in VUE
  • Vue.js study notes v-bind and v-on analysis
  • Vue uses v-bind to assign values ​​to src and href

<<:  CSS style does not work (the most complete solution summary in history)

>>:  Example of customizing the style of the form file selection box

Recommend

Detailed explanation of js closure and garbage collection mechanism examples

Table of contents Preface text 1. Closure 1.1 Wha...

Detailed usage of js array forEach instance

1. forEach() is similar to map(). It also applies...

Detailed explanation of MySQL and Spring's autocommit

1 MySQL autocommit settings MySQL automatically c...

Centos8 builds nfs based on kdc encryption

Table of contents Configuration nfs server (nfs.s...

Explore the truth behind the reload process in Nginx

Today's article mainly introduces the reload ...

WeChat applet realizes simple tab switching effect

This article shares the specific code for WeChat ...

Organize the common knowledge points of CocosCreator

Table of contents 1. Scene loading 2. Find Node 1...

Interpretation of CocosCreator source code: engine startup and main loop

Table of contents Preface preparation Go! text St...

A brief introduction to MySQL database optimization techniques

A mature database architecture is not designed wi...

setup+ref+reactive implements vue3 responsiveness

Setup is used to write combined APIs. The interna...

How to use type enhancement without typingscript

Preface Due to the weak typing of JS, loose writi...

Detailed explanation of VUE's data proxy and events

Table of contents Review of Object.defineProperty...

Detailed explanation of using echarts map in angular

Table of contents Initialization of echart app-ba...

Detailed explanation of client configuration for vue3+electron12+dll development

Table of contents Modify the repository source st...

Complete steps to install MySQL 8.0.x on Linux

MySQL Introduction to MySQL MySQL was originally ...