【Vue学习记录一】class绑定、v-model.trim等

1、想根据交互动态切换css样式？

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

errorClass的样式一直都会有，isActive这个样式则取决于isActive的布尔值

<div v-bind:class="isActive ? activeClass : ''></div>

不加errorClass样式的话，可以直接写三元表达式

还有一种对象写法：

<div v-bind:class="{ active: isActive }"></div>  active为类选择器的名称，isActive为boolean值（True/False）

2、碰到了v-model的新用法，加修饰符 可以自动去除用户输入的首尾空格

<el-input v-model.trim="username"></el-input>

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

（HTML 输入元素的值也总会返回字符串）

<input v-model.number="age" type="number">

3、代码规范之擅用 || 或者 &&

前端在拿后端数据后，将数据赋值给其他变量时，可以使用以下代码规范。当res为null或undefined时，此时res || {}会返回{}，这行代码就不会报错。如果直接赋值，一旦res为null或undefined，代码会报错。

const {firstName,lastName} = res || {}

4、ES6的解构赋值之对象

const {a,b}={a:1,b:2}
console.log(a) //1
console.log(b) //2

const { UserInfo: { isRole } } = this这段代码的含义是：从this对象中提取UserInfo对象，并且尝试从UserInfo对象中提取isRole属性。

这种写法是嵌套解构的一种形式，允许你直接从深层嵌套的对象中提取值。

PS:前端小白，如有问题欢迎批评指正。