【Vue知识体系总结 3，写得太好了

<label for="username">用户账号</label>

<input type="text" id="username" placeholder="用户账号" key="username">

<label for="email">用户邮箱</label>

<input type="text" id="email" placeholder="用户邮箱"  key="email">

<button @click=“isUser = !isUser”>切换类型

注：通过key=username解决input复用问题，input复用机制是vue底层为了缓存而制定的策略。



### 9、v-show



### 10、v-for遍历对象

• <li v-for="item in user">{{item}}</li>
  

• <li v-for="(key, value) in user">{{key}}-{{value}}</li>
  

![](https://img-blog.csdnimg.cn/20210717233755268.png)



key的作用主要是为了高效的更新虚拟DOM。



### 11、哪些数组的方法是响应式的

• <li v-for="item in girls" :key="item">{{item}}</li>
  

<button @click=“btnClick”>按钮

![](https://img-blog.csdnimg.cn/20210718001433254.png)



非响应式“云芝”写入失败。



![](https://img-blog.csdnimg.cn/20210718001444526.png)



响应式，“云芝”写入成功



![](https://img-blog.csdnimg.cn/20210718001756193.png)



二、购物车综合案例

---------



> 需求分析：通过动态加载数据，价格格式化展示，数量可增可减，可移除购物车，可清空购物车。



### 1、index.html

<div v-if="girls.length">

  <table>

    <thead>

    <tr>

      <th></th>

      <th>名字</th>

      <th>年龄</th>

      <th>价格</th>

      <th>数量</th>

      <th>技能</th>

      <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr v-for="(item,index) in girls">

      <td>{{item.id}}</td>

      <td>{{item.name}}</td>

      <td>{{item.age}}</td>

      <td>{{item.price | showPrice}}</td>

      <td>

        <button @click="decrement(index)"

                :disabled="item.count <= 1">-</button>

        {{item.count}}

        <button @click="increment(index)">+</button>

      </td>

      <td>{{item.skill}}</td>



      <td>

        <button @click="removeHandler(index)">移除</button>

      </td>

    </tr>

    </tbody>

  </table>

  <h2>总价格：{{totalPrice | showPrice}}</h2>

</div>

<h2 v-else>购物车为空</h2>

### 2、index.js

const app = new Vue({

el: ‘#app’,

data: {

girls: [

  {

    id: 1,

    name: '比比东',

    age: 18,

    count: 1,

    skill: '不死之身',

    price: 100.00

  },{

    id: 2,

    name: '千仞雪',

    age: 20,

    count: 1,

    skill: '天使圣剑',

    price: 25.00

  },{

    id: 3,

    name: '美杜莎',

    age: 17,

    count: 1,

    skill: '美杜莎的凝望',

    price: 19.00

  },{

    id: 4,

    name: '云韵',

    age: 25,

    count: 1,

    skill: '风之极陨杀',

    price: 1999.99

  },{

    id: 5,

    name: '雅妃',

    age: 21,

    count: 1,

    skill: '红衣诱惑',

    price: 68.00

  }

]

},

methods :{

increment(index){

  this.girls[index].count++

},

decrement(index){

  this.girls[index].count--

},

removeHandler(index){

  this.girls.splice(index, 1)

}

},

computed: {

totalPrice(){

  let totalPrice = 0;

  for(let i=0;i<this.girls.length;i++){

    totalPrice += this.girls[i].price * this.girls[i].count;

  }

  return totalPrice;

}

},

filters: {

showPrice(price) {

  return '$' + price.toFixed(2)

}

}

})

### 3、style.css

table {

border: 1px solid #e9e9e9;

border-collapse: collapse;

border-spacing: 0;

}

最后分享一波我的面试宝典——一线互联网大厂Java核心面试题库

以下是我个人的一些做法，希望可以给各位提供一些帮助：

点击《一线互联网大厂Java核心面试题库》即可免费领取，整理了很长一段时间，拿来复习面试刷题非常合适，其中包括了Java基础、异常、集合、并发编程、JVM、Spring全家桶、MyBatis、Redis、数据库、中间件MQ、Dubbo、Linux、Tomcat、ZooKeeper、Netty等等，且还会持续的更新…可star一下！

283页的Java进阶核心pdf文档

Java部分：Java基础，集合，并发，多线程，JVM，设计模式

数据结构算法：Java算法，数据结构

开源框架部分：Spring，MyBatis，MVC，netty，tomcat

分布式部分：架构设计，Redis缓存，Zookeeper，kafka，RabbitMQ，负载均衡等

微服务部分：SpringBoot，SpringCloud，Dubbo，Docker

还有源码相关的阅读学习

点击《一线互联网大厂Java核心面试题库》即可免费领取，整理了很长一段时间，拿来复习面试刷题非常合适，其中包括了Java基础、异常、集合、并发编程、JVM、Spring全家桶、MyBatis、Redis、数据库、中间件MQ、Dubbo、Linux、Tomcat、ZooKeeper、Netty等等，且还会持续的更新…可star一下！

[外链图片转存中…(img-gUQIKF5Q-1628389852295)]

283页的Java进阶核心pdf文档

Java部分：Java基础，集合，并发，多线程，JVM，设计模式

数据结构算法：Java算法，数据结构

开源框架部分：Spring，MyBatis，MVC，netty，tomcat

分布式部分：架构设计，Redis缓存，Zookeeper，kafka，RabbitMQ，负载均衡等

微服务部分：SpringBoot，SpringCloud，Dubbo，Docker

[外链图片转存中…(img-MyLN3UZb-1628389852297)]

还有源码相关的阅读学习

[外链图片转存中…(img-TrgWHs1N-1628389852298)]