Vue笔记2--类样式绑定和内置指令v-xxx

1、Class和Style绑定

class绑定

放置对象（常用）

:class="{类名:布尔}"

    <!-- 第一种 放置字符串-->
    <p class="active">hello</p>
    <!-- 第二种 放置对象-->
    <!-- <p :class="{类名:布尔}">hello</p> -->
    <p :class="{active:true}">hello1</p>
    <p :class="{active:isActive,helloWorld:isActive}">hello1</p>
    <button @click="isActive=!isActive">改变Active</button>
    <!-- 和普通类同时存在不会冲突 -->
    <p :class="{active:true}" class="helloWorld">hello1</p>
    <p :class="classObj">hello1</p>

使用computed

this.error表示是否渲染出来了

export default{
  data(){
    return{
      message:"helloWorld",
      isActive:true,
      error:null,
      classObj:{
        active:true,
        helloWorld:true,
      }
    }
  },
  computed:{
    classObjCom:function(){
      return{
        active:this.isActive && !this.error,
        helloWorld:this.error,
      }
    }
  }
}

    <p :class="classObjCom">hellocomputed</p>

传数组（不常用）

  data(){
    return{
      message:"helloWorld",
      activeClass:"active",
      ...
    }
  },

    <!-- 数组语法 -->
    <p :class="[activeClass,message]">hello2</p>
    <!-- 数组和对象结合 -->
    <p :class="[message,{active:isActive}]">hello3</p>

style绑定

  <!-- 第一种 放置字符串 -->
  <p style="color:red">hello</p>

:style="{ key:value }" 其中key是css属性名，value是属性值来自data

使用驼峰命名法，用font-size 50px要打引号

  data(){
    return{
      activeColor:'red',
      fontSize:'50px',
      bgcColor:'pink',
      styleObj:{
        color:'red',
        fontSize:'50px',
        'background-color':'pink',
      }
    }
  },

  <p :style="{color:activeColor,fontSize:fontSize,'background-color':bgcColor}">hello1</p>
  <p :style="styleObj">hello1</p>

和class类似经常结合computed使用，参考class即可

使用数组

  <p :style="[styleObj,{border:'5px solid blue'}]">hello2</p>

2、内置指令 v-xxx

一部分已经在上一篇力提到这里只记录常用的

v-if条件渲染使用

      <p v-if="age>18">我是个成年人</p>
      <p v-else-if="age==18">我今天刚好18</p>
      <!-- <p v-if="age<18">我是个小朋友</p> -->
      <p v-else>我是个小朋友</p>

template元素上使用条件渲染分组

template是不可见的包裹元素，最终渲染不会显示出来。

最后只有大于18岁的人才看的见，同时网页源码中不会出现template标签

      <template v-if="age>=18">
        <p>你好</p>
        <p>你好</p>
        <p>你好</p>
      </template>

v-show条件渲染

v-show会始终渲染并保留在DOM中，只是简单的遮蔽（切换元素的display CSS property）。v-show不支持template。

      <p v-show="sex=='man'">男生</p>
      <p v-show="sex=='woman'">女生</p>

v-if VS v-show

v-if只要条件不满足，对应元素和子元素都不会被渲染，控制dom元素的创建和销毁。

v-show只是隐藏

总结：分场景使用这两者，频繁切换状态使用v-show；一次性的、条件很少改变的使用v-if。

v-for列表渲染

v-for使用数组

export default{
  data(){
    return{
      person:['张三','李四','王五'],
    }
  },
};

item代表数组中每个元素，index表示下标。:key提供一个排序的提示，in和of同时都可以使用

    <ul>
      <li v-for="item in person" :key="item">{{item}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) in person" :key="index">
        {{item}}-->{{index}}
      </li>
    </ul>
    <ul>
      <li v-for="(item,index) of person" :key="index">
        {{item}}-->{{index}}
      </li>
    </ul>

v-for使用对象

  data(){
    return{
      person:['张三','李四','王五'],
      personObj:{name:"张三",age:18,sex:"男"},
    }
  },

item代表键值，key表示键名

    <ul>
      <li v-for="(item,key,index) in personObj" :key="index">
          {{item}}-->{{key}}-->{{index}}
        </li>
    </ul>

维护状态

:key给vue提示排列顺序（跟踪每个节点身份，从而重用和重排现有元素）

export default{
  data(){
    return{
      person:['张三','李四','王五'],
      personObj:{name:"张三",age:18,sex:"男"},
    }
  },
  methods:{
    addPerson:function(){
      this.person.unshift('赵六');//插入到最前
    }
  }
};

    <ul>
      <li v-for="item in person">
        <input type="checkbox" name="" id="">{{item}}
      </li>
    </ul>
    <button @click="addPerson">增加用户</button>

如果不指定:key，那么将会发生：当我勾选张三后，再点击添加赵六，赵六成了第一个，钩变到赵六身上。

所以需要指定：key作为唯一的标识。快速找到节点，减少渲染次数，提高性能。

正确的写法：

    <ul>
      <li v-for="item in person" :key="item">
        <input type="checkbox" name="" id="">{{item}}
      </li>
    </ul>
    <button @click="addPerson">增加用户</button>

v-for数组更新

触发试图更新vue2和vue3的区别，vue3数组实现了彻底的响应式。

写一个列表，并且准备一个按钮点击更改。

  <div>
    <ul>
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <button @click="changeList">改变数组</button>
  </div>

export default {
  data() {
    return {
      list: [1, 3, 6, 4, 5],
    };
  },
  methods: {
    changeList:function(){
		...
    },
  },
};

Vue3做法

vue3很强大直接下标修改，越界也可

  methods: {
    changeList:function(){
      this.list[5]=7;
    },
  },

Vue2做法

需要借助js来进行数组更改

push和pop

push();给数组末尾添加元素可以是多个

pop();删除掉数组的最末尾

  methods: {
    changeList:function(){
        this.list.push(7,8,9);
        this.list.pop();
    },
  },

shift和unshift

shift();删除首位

unshift();添加到首位可以是多个

  methods: {
    changeList:function(){
      this.list.shift();
      this.list.unshift(0,0,9);
    },
  },

splice

最为常用，可删除、插入、替换元素。

参数1：表示开始拆入或者开始删除的元素位置下标

参数2：想要传入or删除几个元素

  methods: {
    changeList:function(){
      //删除元素
      this.list.splice(1);//删除从[1]往后所有
      this.list.splice(1,2);//删除从[1]往后2个
      //插入元素
      this.list.splice(1,0,9);//参数2为0表示插入
      this.list.splice(1,0,9,8,7);//从[1]插入多个
      //替换元素
      this.list.splice(1,3,9,8,7);//参数2为三表示替换三个元素
    },
  },

sort和reverse

sort();排序默认从小到大

reverse();翻转

  methods: {
    changeList:function(){
      this.list.sort();
      this.list.reverse();
    },
  },