Parsing the commonly used v-instructions in vue.js

Parsing the commonly used v-instructions in vue.js

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:
  • About the use of Vue v-on directive
  • Vue directive v-html uses filters function example
  • Vue v-text directive simple usage example
  • Vue.js instruction v-for usage and subscript index acquisition
  • A brief discussion on the use of v-on event instructions in Vue.js
  • v-cloak directive in Vue.js and detailed usage
  • Vue.js instruction v-for usage and index acquisition

<<:  Solve the problem of failure to mount files or directories using ./ relative path in docker run

>>:  How to use MySQL common functions to process JSON

Recommend

A simple way to implement Vue's drag screenshot function

Drag the mouse to take a screenshot of the page (...

MySQL practical window function SQL analysis class students' test scores and living expenses

Table of contents 1. Background 2. Table creation...

30 Tips for Writing HTML Code

1. Always close HTML tags In the source code of p...

MySQL knowledge points and commonly used MYSQL commands for the second-level computer exam

The basics of MySQL knowledge points for the seco...

Use of Linux file command

1. Command Introduction The file command is used ...

Detailed explanation of Linux text processing tools

1. Count the number of users whose default shell ...

Centos7 configuration fastdfs and nginx distributed file storage system implementation process analysis

1. Install libfastcommon-1.0.43. The installation...

Detailed explanation of the usage of position attribute in HTML (four types)

The four property values ​​of position are: 1.rel...

MySQL replication detailed explanation and simple example

MySQL replication detailed explanation and simple...

Detailed explanation of Mysql 5.7.18 installation method and the process of starting MySQL service

MySQL is a very powerful relational database. How...

Pull-down refresh and pull-up loading components based on Vue encapsulation

Based on Vue and native javascript encapsulation,...

Docker deploys nginx and mounts folders and file operations

During this period of time, I was studying docker...

jQuery achieves the effect of advertisement scrolling up and down

This article shares the specific code of jQuery t...

Detailed explanation of the core concepts and basic usage of Vuex

Table of contents introduce start Install ① Direc...

Detailed explanation of Vue router routing

Table of contents 1. Basic use 2. Several points ...