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!