vue.js study notes 3

Fourth, Class and style binding

    <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

We see that the data binding is a bit special, here is an object , the key inside is the name of the class , and the value is the binding data . When the binding data is true, the class will be rendered into html;
pay attention to the key Adding '' or not adding '' here is the same.

1) This added class name can coexist with the original class name~

2) Directly use the object to bind

This method is recommended if you want to control more complex class display. Carefully compare the two writing methods, you will find that the class is the data variable .

Then you can control whether to add such names by controlling true and false

3) Use an array (do not judge whether to add or not, but directly add multiple class names)

5. Conditional rendering

Manage reusable elements with keys

By default, such a piece of code, the input content will not be replaced

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

If I input the content before the replacement, it will still be displayed in the input box after the replacement,

If you want to clear (re-render the input) every time you toggle, you can add a key property with a unique value to it:

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

Frequent switching with v-show

v-ifWhen v-forused with , v-forhas v-ifhigher .

6. List rendering

Array update detection

1) Change the array data

1. push() //在结尾增加一条或多条数据
2. pop() //删除最后一条数据
3. shift() //删除第一条数据，并返回这条数据
4. unshift() //在开始增加一条或多条数据，并返回数组长度
5. splice() //向/从数组中添加/删除项目，然后返回被删除的项目。
6. sort() //对数组的元素进行排序。
7. reverse() //颠倒数组中元素的顺序。
8. You open the console and call the mutation method with the itemsarray :example1.items.push({ message: 'Baz' }

2) return a new array

1. filter() //返回条件为真的数据
2. concat() //连接两个或多个数组
3. slice() //从已有的数组中返回选定的元素。

3) Vue cannot detect changes in the following arrays

i.e. the array cannot be changed in the following way

var vm = new Vue({
    
   
  data: {
    
   
    items: [ 'a' , 'b' , 'c' ] 
  } 
}) 
vm.items[ 1 ] = 'x'  // not reactive
 vm.items.length = 2  // not reactive

Use the set function to change the value of an array

vm.$set(vm.items, indexOfItem, newValue)

4) Vue cannot add properties like this

also use set