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

Convert psd cut image to div+css format

PSD to div css web page cutting example Step 1: F...

Embed player in web page embed element autostart false invalid

Recently, I encountered the need to embed a player...

Characteristics of JavaScript arrow functions and differences from ordinary functions

Table of contents 1. Use of arrow functions 1. Fr...

Detailed explanation of js event delegation

1. Each function is an object and occupies memory...

How to keep the content within the container when the flex layout is stretched by child elements

On mobile devices, flex layout is very useful. It...

Implementation of CSS3 button border animation

First look at the effect: html <a href="#...

Example code for implementing ellipse trajectory rotation using CSS3

Recently, the following effects need to be achiev...

IE9beta version browser supports HTML5/CSS3

Some people say that IE9 is Microsoft's secon...

HTML Editing Basics (A Must-Read for Newbies)

Open DREAMWEAVER and create a new HTML. . Propert...

This article will help you thoroughly understand the specific use of cgroup in Docker

Table of contents What is cgroup Composition of c...

Implementation of CSS circular hollowing (coupon background image)

This article mainly introduces CSS circular hollo...

A brief discussion on the problem of forgotten mysql password and login error

If you forget your MySQL login password, the solu...

Analysis of different MySQL table sorting rules error

The following error is reported when MySQL joins ...

Detailed explanation of slave_exec_mode parameter in MySQL

Today I accidentally saw the parameter slave_exec...

Tutorial on installing mysql5.7.23 on Ubuntu 18.04

This article shares with you the specific method ...