current position:Home>Front end Vue conditional rendering and list rendering

Front end Vue conditional rendering and list rendering

2022-04-29 05:12:22A little rabbit who likes eating radishes

Conditions apply colours to a drawing

v-if The value is false,v-if The label in is directly in HTML Delete in document ;
v-show The value is false,v-show Label in display The value of is none.

v-if=“ expression ”    //

An expression simply returns a value , Here should be able to convert to Boolean value .

template label The biggest advantage is that it does not affect the structure of the document , Rendering will template label Get rid of
template And the only v-if In combination with

<body>
  <div id="root">
    <div> Welcome to {
   {name}}</div>
    <div>
      <h2> Number :{
   {num}}</h2>
      <button @click="num++"> I'll add one </button>
    </div>
    <hr />
    <div>
      <h2>v-show</h2>
      <h2 v-show="num === 1">html</h2>
      <h2 v-show="num === 2">css</h2>
      <h2 v-show="num === 3">js</h2>
      <h2 v-show="num === 4">vue</h2>
      <h2 v-show="num === 5">nodejs</h2>
    </div>
    <hr />
    <div>
      <h2>v-if</h2>
      <h2 v-if="num === 1">html</h2>
      <h2 v-else-if="num === 2">css</h2>
      <h2 v-else-if="num === 3">js</h2>
      <h2 v-else-if="num === 4">vue</h2>
      <h2 v-else-if="num === 5">nodejs</h2>
      <h2 v-else> Temporary deadline </h2>
    </div>
  </div>

  <script> Vue.config.productionTip = false; const vm = new Vue({
       el: '#root', data() {
       return {
       name: ' Silicon Valley ', num: 1, } }, </script>
</body>

The list of rendering

 Insert picture description here

v-for Traversal array

  <!--  Containers  -->
  <div id="root">
    <h2> Personnel list </h2>
    <ul>
      <li v-for="p in persons" :key="p.id">
        {
   {p.name}}-{
   {p.age}}
      </li>
    </ul>
  </div>
    new Vue({
    
      el: '#root',
      data() {
    
        return {
    
          persons: [{
    
              id: '001',
              name: ' Zhang San ',
              age: 18
            },
            {
    
              id: '002',
              name: ' Li Si ',
              age: 17
            },
            {
    
              id: '003',
              name: ' Qian Wu ',
              age: 16
            },
            {
    
              id: '004',
              name: ' Wang Liu ',
              age: 19
            },
          ]
        }
      }
    })

upper v-for One parameter , below v-for Two parameters

    <ul>
      <li v-for="(p,index) in persons" :key="index">
        {
   {p.name}}-{
   {p.age}}
      </li>
    </ul>

The first parameter is used to traverse the elements in the array ,
The second parameter is the corresponding coordinates in the array .

key

to A node is an identifier , It can be equivalent to a person's ID card ,:key You can dynamically bind the contents of the array id

Don't write key,key Default index

working principle :
data →VDOM( Virtual nodes contain key)→DOM
When data is updated , New and old virtual DOM Contrast (diff). According to the same key contrast , Same content , Reuse ; The content is different , Generate new nodes .
 Insert picture description here

key The choice of

 Insert picture description here

v-for Traversing objects

    <h2> Car information </h2>
    <ul>
      <li v-for="(value,index) in cars" :key="index">
        {
   {index}}:{
   {value}}
      </li>
    </ul>
 cars: {
    
            name: ' audi ',
            price: '70 ten thousand ',
            color: ' black '
          }

index Refers to the property name ,
value Is the corresponding property value .
If only one row parameter is used, only the attribute value is traversed .

Traversal string

    <h2> Traversal string </h2>
    <ul>
      <li v-for="(value,index) in str" :key="index">
        {
   {index}}:{
   {value}}
      </li>
    </ul>
data(){
    
  str: 'abcdefg',
}

Traverse the specified number of times

    <h2> Traverse the specified number of times </h2>
    <ul>
      <li v-for="(value,index) in 6" :key="index">
        {
   {index}}:{
   {value}}
      </li>
    </ul>

 Insert picture description here

List filtering

Fuzzy search – computed /watch
But it works computed Use of realization computed

1. Get user input :v-model,keyWord
2. stay computed in , Take the original array as the data range , Use filter Filter whether the name contains corresponding words item by item (indexOf)

  <!--  Containers  -->
  <div id="root">
    <h2> Personnel list </h2>
    <input type="text" v-model="keyWord" placeholder=" Please enter a name ">
    <ul>
      <li v-for="(p,index) in filterPersons" :key="p.id">
        {
   {p.name}}-{
   {p.age}}-{
   {p.sex}}
      </li>
    </ul>
  </div>
new Vue({
    
  el: '#root',
  data() {
    
    return {
    
      keyWord: '',
      persons: [{
    
          id: '001',
          name: ' Ma Dongmei ',
          age: 18,
          sex: ' Woman '
        },
        {
    
          id: '002',
          name: ' Dongyu Zhou ',
          age: 17,
          sex: ' Woman '
        },
        {
    
          id: '003',
          name: ' Jay Chou ',
          age: 16,
          sex: ' male '
        },
        {
    
          id: '004',
          name: ' Wen zhaolun ',
          age: 19,
          sex: ' male '
        },
      ]
    }
  },
  computed: {
    
    filterPersons() {
    
      return this.persons.filter((p) => {
    
        return p.name.indexOf(this.keyWord) !== -1;
      })
    }
  }
})

Sort the list

computed
1. stay computed Use in filter Filtering data , In an array
2. Get the array data and sort
3. Return the data

<!-- * @LastEditors:  A little rabbit who likes to eat radishes  * @Date: 2022-04-24 16:49:04 * @LastEditTime: 2022-04-24 17:05:52 * @FilePath: \vuejs-learn\vue-start\list-sort.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--  Page label icon  -->
  <link rel="shortcut icon" href="../favicon.svg">
  <title> Sort the list </title>
  <!--  introduce Vue -->
  <script src="../vuejs/vue.js"></script>
</head>

<body>
  <!--  Containers  -->
  <div id="root">
    <h2> Personnel list </h2>
    <input type="text" v-model="keyWord" placeholder=" Please enter a name ">
    <button @click="sortType = 1"> Descending </button>
    <button @click="sortType = 2"> Ascending </button>
    <button @click="sortType = 0"> The original order </button>
    <ul>
      <li v-for="(p,index) in filterPersons" :key="p.id">
        {
   {p.name}}-{
   {p.age}}-{
   {p.sex}}
      </li>
    </ul>
  </div>

  <script> Vue.config.productionTip = false; //  prevent  Vue  Production prompt generated at startup  new Vue({
       el: '#root', data() {
       return {
       sortType: 0, keyWord: '', persons: [{
       id: '001', name: ' Ma Dongmei ', age: 18, sex: ' Woman ' }, {
       id: '002', name: ' Dongyu Zhou ', age: 17, sex: ' Woman ' }, {
       id: '003', name: ' Jay Chou ', age: 16, sex: ' male ' }, {
       id: '004', name: ' Wen zhaolun ', age: 19, sex: ' male ' }, ] } }, computed: {
       filterPersons() {
       const arr = this.persons.filter((p) => {
       return p.name.indexOf(this.keyWord) !== -1; }) if (this.sortType) {
       arr.sort((p1, p2) => {
       return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age; }) } return arr; } } }) </script>
</body>

</html>

Next section : Front end vue Principle of monitoring data change

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446165.html

Random recommended