Parsing the commonly used v-instructions in vue.js

Explanation of v-text on if for model bind show in Vue

v-html:
v-on
v-if
v-for
v-model
v-bind
v-show
The difference between v-bind and v-model

Explanation of v-text on if for model bind show in Vue

v-text: The InnerText property of the element must be a double tag followed by { { }} has the same effect. Less commonly used. Note: v-text can only be used in double tags.

v-html:

The innerHTML of an element
v-html actually assigns a value to the innerHTML of an element

v-on

In fact, v-on can be followed by not only click events but also other events, and the usage is similar. For example: v-on:click/mouseout/mouseover/mousedown…

The following click is an example

Note: All v-on can be abbreviated as @, for example, v-click can be abbreviated as @click

You can use the v-on directive to listen for DOM events and run some JavaScript code when they are triggered. Generally speaking, it is to listen to DOM to trigger some operations. The actions (js) executed after these operations (such as clicks) are triggered can be written directly behind

v-on:click="item+=1"

v-if

v-if: Determine whether to insert this element, which is equivalent to destroying and creating the element

v-for

v-for usage v-fo="(item,index) in data" index index item index data

1. Iterate over a normal array and define a normal array in data

data:{
      list:[1,2,3,4,5,6]
}

<p v-for="(item,i) in list">--Index value--{{i}} --Each item--{{item}}</p>

2. Iterate over the object array and define the object array in data

data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
      ]
}
//Use v-for instruction to render in HTML <p v-for "(uesr,i) in listObj"> 
// id --{{user.id}}---name-->{{user.name}}

v-model

You can use the v-model directive to perform two-way data binding on (labels have various types, such as button, select, etc.) and elements
v-model will ignore the initial values of value , checked , and selected attributes of all form elements and always use the data of the Vue instance as the data source. You should declare the initial value via JavaScript in the component's data option:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>vue</title>
</head>
<body>
    <div id="app">
        <input v-model="message">
        <p>The input value is : {{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Word!'
            }
        })
    </script>
</body>
</html>

v-bind

Used to dynamically update the attributes of elements on HTML, such as id class, href, src, etc. Abbreviation: v-bind:href Abbreviation: href

<a :href="{{url}}">aa</a>

Here is some code demonstrating v-bind .

    <style>
        .active{
            border: 1px solid red;
        }
    </style>
   
 <div id="app">
      <img v-bind:src="imgSrc" alt="">  
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
 </div>

        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"upload/2022/web/logo.png",
                imgTitle:"Voldemort",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        })

v-show

If a hidden element is determined to be hidden, display:none will be added to the element's style. It is based on CSS style switching

The difference between v-bind and v-model

There are some cases where we need to use v-bind and v-model together:

<input :value="name" v-model="body">

data.name and data.body, which one changes with which one? Will they even conflict?
In fact, their relationship is the same as explained above. The effect of v-bind does not include two-way binding, so the effect of :value is to make value attribute value of input equal to the value of data.name , and the effect of v-model is to establish a two-way binding between input and data.body . Therefore, first, the value of data.body will be given to value attribute of input , and secondly, when the value entered in input changes, data.body will also change accordingly.
As mentioned above, the following two sentences are equivalent:

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $event.target.value" />

This concludes this article on the use of v-instructions in Vue. For more information on the use of v-instructions in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: