VUE —— 2、案例

谁借莪１个温暖的怀抱￠ 2022-10-19 05:45 169阅读 0赞

**目录**

（6）案例

1.tab切换

（1）方式一：普通写法

1.\{ \{name\}\}

2.v-model

3.v-on

4.v-show

5.v-if

6.v-bind等同于：冒号

（2）方式二：数组

（3）方式三：数组对象

（4）方式四：动态数据（常用）

（5）注意

1.点击其中一个，上面全部都随之变化

2.尽量用id名称，i名称对代码不友好

3.三种方式

2.商城数据动态数据处理

3.二级导航目录

（1）写法一

（2）写法二（索引方式）

4.邀请好友

5.全选

6.监听购物车数量变化（模糊查询）

（1）模糊查询

7.表格的增删改查

--------------------

# （6）案例 #

1）tab切换

2）商城数据动态数据处理

3）二级导航目录

4）邀请好友

5）VUE实现全选

6）监听购物车数量变化（模糊查询）

7）表格的增删改查

## 1.tab切换 ##

![20210710010735725.png][]![20210710010737355.png][]

## （1）方式一：普通写法 ##

### 1.\{ \{name\}\}  ###

![20210710010821787.png][]

demo.html

![20210710010844650.png][]

index.js

window.onload = function () {
        var vm = new Vue({
            el: "#my",   	//element元素   挂载元素
            data: {   	//响应式的数据
                name: 'abc',
            },
            methods: { },
        })
    }

### 2.v-model  ###

demo.html

<body>
    <div id="my">
    ----------------------------------- 添加 -------------------------------------------
            <input type="text" v-model="name"/>	//v-model双向数据绑定
    ----------------------------------------------------------------------------------
            
            <ul class="tab-tit">
                <li class="active">标题一{
       {name}}</li>
                <li>标题二</li>
                <li>标题三</li>
                <li>标题四</li>
            </ul>
            <div class="tab-con">
                <div>
                    内容一
                </div>
                <div>
                    内容二
                </div>
                <div>
                    内容三
                </div>
                <div>
                    内容四
                </div>
            </div>
        </div>
    </body>

![20210710010939397.png][]

###  3.v-on  ###

demo.html

<body>
    <div id="my">
            <input type="text" v-model="name"/>	//v-model双向数据绑定
            
            <ul class="tab-tit">
    ------------------------------- 换成n、添加 ----------------------------------------
                <li class="active" @click="action(0)">标题一{
       {n}}</li>
                <li @click="action(1)">标题二</li>
                <li @click="action(2)">标题三</li>
    -----------------------------------------------------------------------------------
                <li>标题四</li>
            </ul>
            <div class="tab-con">
                <div>
                    内容一
                </div>
                <div>
                    内容二
                </div>
                <div>
                    内容三
                </div>
                <div>
                    内容四
                </div>
            </div>
            
        </div>
    </body>

index.js

window.onload = function () {
        var vm = new Vue({
            el: "#my",   	//element元素   挂载元素
            data: {   	//响应式的数据
                name: 'abc',
    ----------------------------------- 添加 -------------------------------------------
                n: 0,	//默认值
    -----------------------------------------------------------------------------------
            },
            methods: {   //管理函数
    ----------------------------------- 添加 -------------------------------------------
                action(i) {
                    this.n = i;
                },
    -----------------------------------------------------------------------------------
            },
        })
    }

![2021071001101812.png][]![20210710011019631.png][]

###  4.v-show  ###

demo.html

<body>
    <div id="my">
            <input type="text" v-model="name"/>	//v-model双向数据绑定
            
            <ul class="tab-tit">
                <li class="active" @click="action(0)">标题一{
       {n}}</li>
                <li @click="action(1)">标题二</li>
                <li @click="action(2)">标题三</li>
                <li>标题四</li>
            </ul>
            <div class="tab-con">
    ------------------------------- 添加v-show ----------------------------------------
                <div v-show="n==0">
                    内容一
                </div>
                <div v-show="n==1">
                    内容二
                </div>
                <div v-show="n==2">
                    内容三
                </div>
                <div v-show="n==3">
                    内容四
                </div>
    -----------------------------------------------------------------------------------
            </div>
        </div>
    </body>

![20210710011041462.png][]//点击，只显示当前内容

![20210710011047165.png][]

### 5.v-if ###

内容一的v-show换成v-if

![20210710011107833.png][]![20210710011110377.png][]

### 6.v-bind等同于：冒号 ###

demo.html

<body>
    <div id="my">
            <input type="text" v-model="name"/>	//v-model双向数据绑定
            
            <ul class="tab-tit">
    ------------------------------- 添加v-bind ----------------------------------------
                <li :class="n==0?'active':''" @click="action(0)">标题一{
       {n}}</li>
                //n=1与action(1)一样
                <li :class="n==1?'active':''" @click="n=1">标题二</li>
                <li :class="n==2?'active':''" @click="action(2)">标题三</li>
    -----------------------------------------------------------------------------------
                <li>标题四</li>
            </ul>
            <div class="tab-con">
                <div v-show="n==0">
                    内容一
                </div>
                <div v-show="n==1">
                    内容二
                </div>
                <div v-show="n==2">
                    内容三
                </div>
                <div v-show="n==3">
                    内容四
                </div>
            </div>
        </div>
    </body>

![20210710011206753.png][]

![20210710011208641.png][]//点击时，样式也跟随变化

![20210710011220432.png][]

![20210710011222455.png][]//开始默认第三个

## （2）方式二：数组 ##

demo.html

<body>
    <div id="my">
            <input type="text" v-model="name"/>	//v-model双向数据绑定
            
            <ul class="tab-tit">
                <li :class="n==0?'active':''" @click="action(0)">标题一{
       {n}}</li>
                //n=1与action(1)一样
                <li :class="n==1?'active':''" @click="n=1">标题二</li> 
                <li :class="n==2?'active':''" @click="action(2)">标题三</li>
                <li>标题四</li>
            </ul>
            <div class="tab-con">
                <div v-show="n==0">
                    内容一
                </div>
                <div v-show="n==1">
                    内容二
                </div>
                <div v-show="n==2">
                    内容三
                </div>
                <div v-show="n==3">
                    内容四
                </div>
            </div>
    ------------------------------------ 添加 ------------------------------------------
            
            <ul class="tab-tit">		//:key="i"可以唯一值
                <li v-for="(v,i) in title" :key="i" :class="n==i?'active':''"  
                @click="action(i)">	//n=1与action(1)一样
                    {
       {v}}
                </li>
            </ul>
            <div class="tab-con">		//:key="i"可以唯一值
                <div v-for="(v,i) in content" :key="i" v-show="n==i">
                    {
       {v}}
                </div>
            </div>
    -----------------------------------------------------------------------------------
        </div>
    </body>

![20210710011304466.png][]![20210710011304469.png][]//一样

index.js

window.onload = function () {
        var vm = new Vue({
            el: "#my",   	
            data: {   	//响应式的数据
                name: 'abc',
                n: 0,	//默认值
    ----------------------------------- 添加 -------------------------------------------
                title: ['标题1', '标题2', '标题3', '标题2', '标题3'],
                content: ['内容1', '内容2', '内容3', '内容2', '内容3'],
    -----------------------------------------------------------------------------------
            },
            methods: {   //管理函数
                action(i) {
                    this.n = i;
                },
    
            },
        })
    }

## （3）方式三：数组对象 ##

demo.html

<ul class="tab-tit">		 //:key="i"可以唯一值            
                <li v-for="(v,i) in obj" :key="i" :class="n==i?'active':''" 
                @click="action(i)">	//n=i与action(i)一样
                    {
       {v.title}}
                </li>
            </ul>
            <div class="tab-con">		//:key="i"可以唯一值
                <div v-for="(v,i) in obj" :key="i" v-show="n==i">
                    {
       {v.content}}
                </div>
            </div>

![2021071001141460.png][]![2021071001141461.png][]//一样

index.js

window.onload = function () {
        var vm = new Vue({
            el: "#my",   
            data: {   	
                name: 'abc',
                n: 0,	//默认值
                title: ['标题1', '标题2', '标题3', '标题2', '标题3'],
                content: ['内容1', '内容2', '内容3', '内容2', '内容3'],
    ----------------------------------- 添加 -------------------------------------------
                obj: [
                    { title: '标题1', content: '内容1' },
                    { title: '标题2', content: '内容2' },
                    { title: '标题3', content: '内容3' },
                    { title: '标题4', content: '内容4' }
                ],
    -----------------------------------------------------------------------------------
            },
            methods: {   //管理函数
                action(i) {
                    this.n = i;
                },
    
            },
        })
    }

## （4）方式四：动态数据（常用） ##

server.js

![20210710011459784.png][]

demo.html

<ul class="tab-tit">		//:key="i"可以唯一值
                <li v-for="(v,i) in lists" :key="i" :class="n==i?'active':''" 
                @click="action(i)">	//n=i与action(i)一样
                    {
       {v.title}}
                </li>
            </ul>
            <ul class="tab-con">		//:key="i"可以唯一值
                <li v-for="(v,i) in lists" :key="i" v-show="n==i">
                    {
       {v.content}}
                </li>
            </ul >

index.js

![2021071001152977.png][]

![20210710011530769.png][]

![20210710011533450.png][]//一样

##  （5）注意 ##

### 1.点击其中一个，上面全部都随之变化 ###

![20210710011556451.png][]

**解决：**

![2021071001160231.png][] //n可以在写一个n2、n3解决

###  2.尽量用id名称，i名称对代码不友好 ###

![20210710011616761.png][]

key 用 i 在数据没有进行排序或者增删改的情况下是好用的，但是一旦有变异的行为，vue新旧虚拟节点就会比对混乱，造成dom更新延迟，页面加载缓慢，或者直接出错，所以用key=id能够高效更新dom

### 3.三种方式 ###

![20210710011631541.png][]

# 2.商城数据动态数据处理 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

![20210710011703660.png][]

index.html

<body>
      <div id="my">
        <div class="panel panel-info" style="margin:20px;">
          
          
          <div class="panel-heading">
            <h1 style="display: inline-block;">我的购物清单列表</h1>
            <span>清单总数
              <span class="label label-warning">{
       {lists.length}}</span>
            </span>
          </div>
          
          
          <div class="panel-body">
            <div class="input-group">
              <input class="form-control" type="text" v-model="name" />
              <span class="input-group-btn">
                <button class="btn btn-primary" @click="add" :disabled="!name">添加</button>
              </span>
            </div>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>清单名称</th>
                  <th>状态</th>
                  <th>删除</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(v,i) in lists">
                  
                  <td>{
       {v.name}}</td>
                  <td>{
       {v.state | stateFilter}}</td> 
                  <td><button type="button" class="btn btn-danger btn-sm" @click="del(i)">删除</button></td>
                </tr>
              </tbody>
            </table>
          </div>
          
        </div>
      </div>
    </body>

index.js

# 3.二级导航目录 #

![20210710011739506.png][]![20210710011741193.png][] //写了两种一样的

##  （1）写法一 ##

![20210710011758309.png][]

index.html

index.js

window.onload = function () {
        new Vue({
            el: '#my',   
            data: {   
    -----------------------------------------------------------------------------------
                items: [
                    {   name: '衣服', icon: 'icon-yonghu',  
                        subItems: [
                            { name: '衣服1' },
                            { name: '衣服2' },
                            { name: '衣服3' },
                        ]
                    },
                    {   name: '包包', icon: 'icon-licai',  
                        subItems: [
                            { name: '包包1' },
                            { name: '包包2' },
                            { name: '包包3' },
                        ]
                    },
                    {   name: '化妆品', icon: 'icon-jia', 
                        subItems: [
                            { name: '化妆品1' },
                            { name: '化妆品2' },
                            { name: '化妆品3' },
                        ]
                    }
                ]
    -----------------------------------------------------------------------------------
            },
            methods: { }
        })
    }

![20210710011837597.png][]![20210710011840153.png][]//也有接触时的样式

index.html

index.js

window.onload = function () {
        new Vue({
            el: '#my',   
            data: {   
    ------------------------------------ 添加flag -------------------------------------
                items: [
                    {   name: '衣服', icon: 'icon-yonghu', flag: false, //false是隐藏
                        subItems: [
                            { name: '衣服1' },
                            { name: '衣服2' },
                            { name: '衣服3' },
                        ]
                    },
                    {   name: '包包', icon: 'icon-licai', flag: true,   //true是隐藏
                        subItems: [
                            { name: '包包1' },
                            { name: '包包2' },
                            { name: '包包3' },
                        ]
                    },
                    {   name: '化妆品', icon: 'icon-jia', flag: false,
                        subItems: [
                            { name: '化妆品1' },
                            { name: '化妆品2' },
                            { name: '化妆品3' },
                        ]
                    }
                ]
    -----------------------------------------------------------------------------------
            },
            methods: { }
        })
    }

![20210710011908496.png][]//只打开了第二个，点其他没反应

index.html

index.js

window.onload = function () {
        new Vue({
            el: '#my',  
            data: {   
    -----------------------------------------------------------------------------------
                items: [
                    {   name: '衣服', icon: 'icon-yonghu', flag: false, //false是隐藏
                        subItems: [
                            { name: '衣服1' },
                            { name: '衣服2' },
                            { name: '衣服3' },
                        ]
                    },
                    {   name: '包包', icon: 'icon-licai', flag: true,   //true是隐藏
                        subItems: [
                            { name: '包包1' },
                            { name: '包包2' },
                            { name: '包包3' },
                        ]
                    },
                    {   name: '化妆品', icon: 'icon-jia', flag: false,
                        subItems: [
                            { name: '化妆品1' },
                            { name: '化妆品2' },
                            { name: '化妆品3' },
                        ]
                    }
                ]
    -----------------------------------------------------------------------------------
            },
    ----------------------------------- 添加 -------------------------------------------
            methods: { 　//方法
                changeFlag: function (v) {
                    v.flag = !v.flag;
                }
            }
    -----------------------------------------------------------------------------------
        })
    }

![20210710011955139.png][]//点击时展示

index.js

![20210710012012812.png][]//点击当前的展示，其他的隐藏

index.html

![20210710012027423.png][]//改样式

>  ![2021071001203693.png][]![20210710012038120.png][]//45度箭头（rotate）

index.**css**

css文件：添加

.down {
        transform: rotate(180deg);
    }
    .up {
        transform: rotate(0deg);
    }

index.html

![20210710012115534.png][]//箭头

index.**css**

css文件：添加

.p_title b{
        float: right;
    ----------------------------------- 添加 -------------------------------------------
        transition:all ease 1s;
    -----------------------------------------------------------------------------------
    }

//箭头旋转方式变化

## （2）写法二（索引方式） ##

//索引方式（类似之前的项目：tab切换，数组）

![20210710012213784.png][]

index.html与index2.html**区别：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]

index.js与index2.js**区别：**

index.js //多加了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]

index2.js //多加了n**:** 1

![20210710012244340.png][]

灰色背景代码是新添加的：

index2.html

index2.js

window.onload = function () {
        new Vue({
            el: '#my',  
            data: {   
                n: 1,
                items: [
                    {   name: '衣服', icon: 'icon-yonghu',
                        subItems: [
                            { name: '衣服1' },
                            { name: '衣服2' },
                            { name: '衣服3' },
                        ]
                    },
                    {   name: '包包', icon: 'icon-licai',
                        subItems: [
                            { name: '包包1' },
                            { name: '包包2' },
                            { name: '包包3' },
                        ]
                    },
                    {   name: '化妆品', icon: 'icon-jia',
                        subItems: [
                            { name: '化妆品1' },
                            { name: '化妆品2' },
                            { name: '化妆品3' },
                        ]
                    }
                ]
            }
        })
    }

![20210710012313235.png][] //一样

#  4.邀请好友 #

![20210710012327435.png][]

![20210710012330537.png][]

![20210710012336818.png][]

![20210710012338805.png][]

index.html

<body>
        <div id='my'>
            <div class="container">
                <div class="row">
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
    ------------------------------------- 添加 -----------------------------------------
                                所有好友({
       {items.length}})
    -----------------------------------------------------------------------------------
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
    ------------------------------------- 添加 -----------------------------------------
                                    <li v-for="(v,i) in items" :key="v.id">
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})	//姓名、qq号
                                    </li>
    -----------------------------------------------------------------------------------
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title">已选择联系人(1)</h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li>
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        张学友(23134332435165)
                                        <span class="glyphicon glyphicon-trash del">
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                </div>
            </div>
        </div>
    </body>

index.js

![20210710012409692.png][]//左边数据有了

index.html

<body>
        <div id='my'>
            <div class="container">
                <div class="row">
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                所有好友({
       {items.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in items" :key="v.id" 
    ------------------------------------- 添加 -----------------------------------------
                                    @click="addItem(v)">
    -----------------------------------------------------------------------------------
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})	//姓名、qq号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
    ------------------------------------- 添加 -----------------------------------------
                                <h3 class="panel-title"> 
                                已选择联系人({
       {selectedItems.length}})
                                </h3>
    -----------------------------------------------------------------------------------
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
    ------------------------------------- 添加 -----------------------------------------
                                    <li v-for="(v,i) in selectedItems" :key="v.id">
    -----------------------------------------------------------------------------------
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
    ------------------------------------- 添加 -----------------------------------------
                                        {
       {v.name}}({
       {v.qq}})
    -----------------------------------------------------------------------------------
                                        <span class="glyphicon glyphicon-trash del">
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                </div>
            </div>
        </div>
    </body>

index.js

window.onload = function(){
        var vm = new Vue({
            el:'#my',   
            data:{   
                items:[{name:'陈奕迅',id:1,qq:'12345678'},
                        {name:'李荣浩',id:2,qq:'12345678'},
                        {name:'毛不易',id:3,qq:'12345678'},
                        {name:'简弘亦',id:4,qq:'24325324364'},
                        {name:'于文文',id:5,qq:'242424'},
                        {name:'火简少女101',id:6,qq:'2324324324'},
                        {name:'TFBOYS',id:7,qq:'54523242'},
                        {name:'BEYOND',id:8,qq:'23435346'},
                        {name:'华晨宇',id:9,qq:'4242342534'},
                        {name:'BIGBANG',id:10,qq:'4322432423'},
                        {name:'DAISHI DANCE',id:11,qq:'243432432'},
                        {name:'李哈哈',id:12,qq:'3244322432'},
                        {name:'周笔畅',id:13,qq:'5352324532'},
                        {name:'张碧晨',id:14,qq:'4324324324224'},
                        {name:'广东雨神',id:15,qq:'4324324324'}],
    ------------------------------------- 添加 -----------------------------------------
                selectedItems:[],
    -----------------------------------------------------------------------------------
            },
            methods:{    
    ------------------------------------- 添加 -----------------------------------------
                addItem(item){
                    this.selectedItems.push(item);
                    this.selectedItems=[...new Set(this.selectedItems)];
                },
    -----------------------------------------------------------------------------------
            },
        })
    }

//左边点谁，右边展示谁

![20210710012447412.png][]

//缺点是，点击同一个，右边也会展示

![20210710012451497.png][]

index.js

//解决去重

index.html

<body>
        <div id='my'>
            <div class="container">
                <div class="row">
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                所有好友({
       {items.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in items" :key="v.id" 
                                    @click="addItem(v)">
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})	//姓名、qq号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                已选择联系人({
       {selectedItems.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in selectedItems" :key="v.id">
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})
    ------------------------------------- 添加 -----------------------------------------
                                        <span class="glyphicon glyphicon-trash del" 
                                        @click="del(i)">
                                        </span>
    -----------------------------------------------------------------------------------
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                </div>
            </div>
        </div>
    </body>

index.js

![2021071001253539.png][]//可删除

index.html

<body>
        <div id='my'>
            <div class="container">
                <div class="row">
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                所有好友({
       {items.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in items" :key="v.id" 
                                    @click="addItem(v)">
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})	//姓名、qq号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                已选择联系人({
       {selectedItems.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in selectedItems" :key="v.id"
    ------------------------------------- 添加 -----------------------------------------
                                    @mouseover="flag='show'" @mouseout="flag='hide'">
                                    //鼠标移入，鼠标移走
    -----------------------------------------------------------------------------------
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})
                                        <span class="glyphicon glyphicon-trash del" 
    ------------------------------------- 添加 -----------------------------------------
                                        @click="del(i)" v-show="flag=='show'">
    -----------------------------------------------------------------------------------
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                </div>
            </div>
        </div>
    </body>

index.js

![20210710012605513.png][]//鼠标移进来时，展示删除的图标

![2021071001261053.png][]

index.js

![20210710012615198.png][] //show换成hide

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]  //换成

![20210710012631190.png][]//鼠标移到谁上，就显示谁删除的图标

![20210710012638689.png][]

index.html

<body>
        <div id='my'>
            <div class="container">
                <div class="row">
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                所有好友({
       {items.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in items" :key="v.id" 
    ------------------------------------- 添加 -----------------------------------------
                                    @click="addItem(v)" :class="v.state?'selected':''">
    -----------------------------------------------------------------------------------
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})	//姓名、qq号
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                    
                    <div class="col-xs-6 col-sm-6">
                        <div class="panel panel-success">
                            
                            <div class="panel-heading">
                                <h3 class="panel-title"> 
                                已选择联系人({
       {selectedItems.length}})
                                </h3>
                            </div>
                            
                            <div class="panel-body panel-height">
                                <ul>
                                    <li v-for="(v,i) in selectedItems" :key="v.id"
                                    @mouseover="flag=i" @mouseout="flag='hide'">
                                    //鼠标移入，鼠标移走
                                        <span class="glyphicon glyphicon-fire photo">
                                        </span>
                                        {
       {v.name}}({
       {v.qq}})
                                        <span class="glyphicon glyphicon-trash del" 
                                        @click="del(i)" v-show="flag==i">
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
    -----------------------------------------------------------------------------------
                </div>
            </div>
        </div>
    </body>

index.js

index.**css**

.selected {
        color:red;
    }

![20210710012727539.png][]//被点击时显示红色

index.html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5][] //添加

index.js

![20210710012759400.png][]

//右边删除谁，左边谁的样式去除

index.html

![2021071001280723.png][]

![20210710012809927.png][]//点几个，展示几

#  5.全选 #

![2021071001282377.png][]

![20210710012825481.png][]

![20210710012827435.png][]

index.html

index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6][]

//拿到数据

index.html

index.js

window.onload = function(){
        var vm = new Vue({
            el:'#demo',  
            data:{   
                items:[{name:'陈奕迅',id:1,city:'12345678',state:false},
                        {name:'李荣浩',id:2,city:'12345678',state:true},
                        {name:'毛不易',id:3,city:'12345678',state:false},
                        {name:'简弘亦',id:4,city:'24325324364',state:false},
                        {name:'于文文',id:5,city:'242424',state:true},
                        {name:'火简少女101',id:6,city:'2324324324',state:false},
                        {name:'TFBOYS',id:7,city:'54523242',state:false},
                        {name:'BEYOND',id:8,city:'23435346',state:false},
                        {name:'华晨宇',id:9,city:'4242342534',state:false},
                        {name:'BIGBANG',id:10,city:'4322432423',state:false},
                        {name:'DAISHI DANCE',id:11,city:'243432432',state:false},
                        {name:'李哈哈',id:12,city:'3244322432',state:false},
                        {name:'周笔畅',id:13,city:'5352324532',state:false},
                        {name:'张碧晨',id:14,city:'4324324324224',state:false},
                        {name:'广东雨神',id:15,city:'4324324324',state:false}],
                checkAll:false,	//全选的状态
            },
            methods:{    
                changeCheckAll:function(item){
    ------------------------------------- 添加 -----------------------------------------
                    this.items.forEach(v=>{
                        v.state = this.checkAll	//注意这里是有箭头函数
                    })
                    //可以解决箭头指向问题，但这里不需要
                    //var self = this;
                    //this.items.forEach(v=>{
                    //self.state = v.checkAll	//注意这里是有箭头函数
                    //})
    -----------------------------------------------------------------------------------
                },
                changeCheck:function(){
    
                }
            },
        })
    }

![20210710012942193.png][]//成功，但取消全选时，子选择未取消

**解决：**

![20210710012952504.png][]判断子选择是否全部打勾

index.html

index.js

![20210710013020986.png][]//点击子选择时，全选框自动取消

# 6.监听购物车数量变化（模糊查询） #

![20210716170551549.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8][]

//拿到数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10][]

//可以加减，但是有负数

![20210716170813906.png][]![20210716170815763.png][]//为0时，禁用

<body>
        <div id="app">
            <div class="panel panel-success" style="margin:20px;">
                
                <div class="panel-heading">
                    <h1>Vue测试监听查询购物车数量及金额变化</h1>
                </div>
                
                <div class="panel-body">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <a class="btn btn-success">名称搜索</a>
                        </span>
                        <input class="form-control" type="text" 
                        placeholder="请输入查询内容"/>
                    </div>
                </div>
                
                <div class="panel-body">
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>商品数量</th>
                                <th>商品单价(元)</th>
                                <th>商品金额(元)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(v,i) in items" :key="v.id">
                                <td><img :src="v.img_url" /></td>	//路径写在items[]中
                                <td>{
       {v.name}}</td>
                                <td>
                                    <button @click="v.count-=1" :disabled="v.count==0">
                                    -
                                    </button>
                                    {
       {v.count}}
                                    <button @click="v.count+=1">+</button>
                                </td>
                                <td>{
       {v.price | priceFilter(2)}}</td>	//小数后两位
                                <td>{
       {v.count*v.price | priceFilter(2)}}</td>
                                <td>
                                	<button type="button" class="btn btn-success btn-sm">
                                	商品详情
                                	</button>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
    ------------------------------------- 添加 -----------------------------------------
                                {
       {totalCount}}
                                件商品总计（不含运费）：
                                {
       {totalPrice | priceFilter(2)}}
    -----------------------------------------------------------------------------------
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
    </body>
    <script>
        window.onload = function () {
            new Vue({
                el: '#app',
                data: {
                  items: [
                  {id: 1,name:"苹果",price: 10,count: 1,img_url:'./images/苹果.jpg'}, 
                  {id: 2,name:"橘子",price: 15.8,count: 1,img_url:'./images/橘子.jpg'},
                  {id: 3,name:"西瓜",price: 3.5,count: 1,img_url:'./images/西瓜.jpg'},
                  {id: 4,name:"火龙果",price: 9.9,count: 1,img_url:'./images/火龙果.jpg'},
                  {id: 5,name:"水密桃",price: 6.8,count: 1,img_url:'./images/桃子.jpg'},
                  {id: 6,name:"哈密瓜",price: 5,count: 1,img_url:'./images/哈密瓜.jpg'},
                  {id: 7,name:"车厘子",price: 129,count: 1,img_url:'./images/车厘子.jpg'}]
                },
                filters: {
                    priceFilter(data, n) {
                        return '￥' + data.toFixed(n);
                    }
                },
    ------------------------------------- 添加 -----------------------------------------
                computed: {	//计算
                    totalCount() {
                        // return this.items.reduce累加(function(total,cur){
                        //     return total+cur.count
                        // },0)
                        //方式二
                        return this.items.reduce累加(
                         (total, cur) => total + cur.count, 0);		//0是初始化
                    },
                    totalPrice() {
                        return this.items.reduce累加(
                         (total, cur) => total + cur.count * cur.price, 0); //0是初始化
                    }
                }
    -----------------------------------------------------------------------------------
            })
        }
    </script>

![20210716170832385.png][]

##  （1）模糊查询 ##

<body>
        <div id="app">
            <div class="panel panel-success" style="margin:20px;">
                
                <div class="panel-heading">
                    <h1>Vue测试监听查询购物车数量及金额变化</h1>
                </div>
                
                <div class="panel-body">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <a class="btn btn-success">名称搜索</a>
                        </span>
                        <input class="form-control" type="text" 
    --------------------------------- 添加 v-model -------------------------------------
                        placeholder="请输入查询内容" v-model="text" />
    -----------------------------------------------------------------------------------
                    </div>
                </div>
                
                <div class="panel-body">
                    <table class="table table-condensed">
                        <thead>
                            <tr>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>商品数量</th>
                                <th>商品单价(元)</th>
                                <th>商品金额(元)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
    -------------------------------- 换成searchData  -----------------------------------
                            <tr v-for="(v,i) in searchData " :key="v.id">
    -----------------------------------------------------------------------------------
                                <td><img :src="v.img_url" /></td>	//路径写在items[]中
                                <td>{
       {v.name}}</td>
                                <td>
                                    <button @click="v.count-=1" :disabled="v.count==0">
                                    -
                                    </button>
                                    {
       {v.count}}
                                    <button @click="v.count+=1">+</button>
                                </td>
                                <td>{
       {v.price | priceFilter(2)}}</td>	//小数后两位
                                <td>{
       {v.count*v.price | priceFilter(2)}}</td>
                                <td>
                                	<button type="button" class="btn btn-success btn-sm">
                                	商品详情
                                	</button>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                {
       {totalCount}}
                                件商品总计（不含运费）：
                                {
       {totalPrice | priceFilter(2)}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
    </body>
    <script>
        window.onload = function () {
            new Vue({
                el: '#app',
                data: {
    ------------------------------------- 添加 -----------------------------------------
                  text: '',
    -----------------------------------------------------------------------------------
                  items: [
                  {id: 1,name:"苹果",price: 10,count: 1,img_url:'./images/苹果.jpg'}, 
                  {id: 2,name:"橘子",price: 15.8,count: 1,img_url:'./images/橘子.jpg'},
                  {id: 3,name:"西瓜",price: 3.5,count: 1,img_url:'./images/西瓜.jpg'},
                  {id: 4,name:"火龙果",price: 9.9,count: 1,img_url:'./images/火龙果.jpg'},
                  {id: 5,name:"水密桃",price: 6.8,count: 1,img_url:'./images/桃子.jpg'},
                  {id: 6,name:"哈密瓜",price: 5,count: 1,img_url:'./images/哈密瓜.jpg'},
                  {id: 7,name:"车厘子",price: 129,count: 1,img_url:'./images/车厘子.jpg'}]
                },
                filters: {
                    priceFilter(data, n) {
                        return '￥' + data.toFixed(n);
                    }
                },
                computed: {	//计算
    --------------------------------- 添加 模糊查询 -------------------------------------
                    searchData() {   
                        if (!this.text) return this.items;
                        return this.items.filter(v => {
                            return v.name.includes(this.text);
                        })
                    },
    -----------------------------------------------------------------------------------
                    totalCount() {
                        // return this.items.reduce累加(function(total,cur){
                        //     return total+cur.count
                        // },0)
                        //方式二
    -------------------------------- 换成searchData  -----------------------------------
                        return this.searchData.reduce累加(
    -----------------------------------------------------------------------------------
                         (total, cur) => total + cur.count, 0);		//0是初始化
                    },
                    totalPrice() {
    -------------------------------- 换成searchData  -----------------------------------
                        return this.searchData.reduce累加(
    -----------------------------------------------------------------------------------
                         (total, cur) => total + cur.count * cur.price, 0); //0是初始化
                    }
                }
            })
        }
    </script>

![20210716170902597.png][]

换成searchData后

![20210716170908755.png][]

# 7.表格的增删改查 #

**自己写的：**

<body>
        <div id="table">
            <div class="add">
                <input type="text" placeholder="标题" v-model="setItems.name"/>
                <input type="text" placeholder="发布人" v-model="setItems.user"/>
                <input type="date" placeholder="发布时间" v-model="setItems.date"/>
                <button @click="add" :disabled="!setItems.name || !setItems.user || !setItems.date">新增</button>
            </div>
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="checkAll" @change="changeCheckAll"/>序号</th>
                        <th>标题</th>
                        <th>发布人</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-for="(v,i) in items" :key="v.id">
                    <tr>
                        <td><input type="checkbox" v-model="v.check" @change="changeCheck()"/>{
       {v.id}}</td>
                        <td>{
       {v.name}}</td>
                        <td>{
       {v.user}}</td>
                        <td>{
       {v.date}}</td>
                        <td>
                            <button @click="del(i)" :disabled="!v.check">删除</button>
                            <button @click="set(v) & action(true)" >编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
    
            <div id="layer" v-show="flag">
                <div class="mask">
                    <div class="title">编辑
                        <span @click="action(false)">x</span>
                    </div>
                    <div class="content">
                        <input type="text" placeholder="标题" v-model="obj.name"/>
                        <input type="text" placeholder="发布人" v-model="obj.user"/>
                        <input type="date" placeholder="发布时间" v-model="obj.date"/>
                        <button @click="add & action(false)" :disabled="!obj.name || !obj.user || !obj.date">更新</button>    
                        <button @click="action(false)">取消</button>
                    </div>
                </div>
            </div>
            
        </div>
    </body>
    <script>
        new Vue({
            el: '#table',
            data: {
                flag: false,
                items: [
                    {name: '标题1', user: 'amy', date: '2020-11-04', id: 1, check: true},
                    {name: '标题2', user: 'ben', date: '2020-11-11', id: 2, check: false}],
                checkAll: false,    //全选的状态
                setItems:{ name: '', user: '', date: '', id: 0, check: false },
                obj: {},
            },
            methods: {
                add(){
                    if (this.setItems.id == 0) {
                        //设置当前新增行的Id
                        this.setItems.id = this.items.length + 1;
                        this.items.push(this.setItems);
                    }
                    this.setItems = {name:'', user:'', date:'', id:0, check:false }
                },
                del(i){
                    this.items.splice(i,1)
                },
                action(i){
                    this.flag = i
                },
                set(v){
                    this.obj = v
                },
                changeCheckAll:function(v){
                    this.items.forEach(v => v.check = this.checkAll)
                },
                changeCheck(){
                    this.checkAll = this.items.every(v => v.check)
                }
            }
        })
    </script>

=====================================================================

**答案：**

<body>
        <div id="table">
            <div class="add">
                <input type="text" placeholder="标题" v-model="obj.name" />
                <input type="text" placeholder="发布人" v-model="obj.user" />
                <input type="date" placeholder="发布时间" v-model="obj.date" />
                <button @click="add()" :disabled="!obj.name || !obj.user ||!obj.date">新增</button>
            </div>
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th><input type="checkbox" @change="checkAllChange()" v-model="checkAll" />序号</th>
                        <th>标题</th>
                        <th>发布人</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(v,i) in items" :key="v.id">
                        <td><input type="checkbox" v-model="v.check" @change="checkChange()" />{
       {i+1}}</td>
                        <td>{
       {v.name}}</td>
                        <td>{
       {v.user}}</td>
                        <td>{
       {v.date}}</td>
                        <td>
                            <button :disabled="!v.check" @click="del(v)">删除</button>
                            <button @click="edit(v)">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
    
            <div id="layer" v-show="flag">
                <div class="mask">
                    <div class="title">
                        编辑
                        <span @click="flag=false">x</span>
                    </div>
                    <div class="content">
                        <input type="text" placeholder="标题" v-model="objEdit.name" />
                        <input type="text" placeholder="发布人" v-model="objEdit.user" />
                        <input type="date" placeholder="发布时间" v-model="objEdit.date" />
                        <button :disabled="!objEdit.name || !objEdit.user ||!objEdit.date" @click="update()">更新</button>
                        <button @click="flag=false">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        window.onload = function () {
            new Vue({
                el: "#table",
                data: {
                    flag: false, //编辑弹框
                    obj: {
                        name: '',
                        user: '',
                        date: '',
                        check: false,
                    },
                    objEdit: {}, //编辑
                    checkAll: false, //全选的值
                    items: [{name: '标题1', user: 'amy', date: '2020-11-04', id: 1, check: true},
                    {name: '标题2', user: 'ben', date: '2020-11-11', id: 11, check: false}]
                },
                methods: {
                    add() { //添加
                        let { name, user, date } = this.obj;
                        let _id = Math.max(...this.items.map(item => item.id)) + 1;
                        this.items.push({
                            name: name,
                            user: user,
                            date: date,
                            id: _id,
                            check: false
                        });
                        //清空
                        this.checkAll = false;  //全选
                        this.obj = {};
                    },
                    del(v) {  //删除
                        this.items = this.items.filter(item => item.id != v.id);
                    },
                    edit(v) { //编辑 显示弹框 
                        this.flag = true;
                        this.objEdit = { ...v };  //扩展运算符， ES6
                    },
                    update() {  //更新数据
                        for (var i = 0; i < this.items.length; i++) {
                            if (this.items[i].id == this.objEdit.id) {
                                this.items[i] = this.objEdit;
                                this.flag = false;
                            }
                        }
                    },
                    checkAllChange() {  //全选
                        this.items.forEach(item => item.check = this.checkAll);
                    },
                    checkChange() {  //子选项
                        this.checkAll = this.items.every(item => item.check);
                    }
                }
            })
        }
    </script>

[20210710010735725.png]: https://img-blog.csdnimg.cn/20210710010735725.png
[20210710010737355.png]: /images/20221005/c80c814bc36045a6b879a923d013ecc5.png
[20210710010821787.png]: /images/20221005/a9ce03be899a476495b2b1c1a65a292d.png
[20210710010844650.png]: /images/20221005/3e51bbafa6834e60babebb48d5d6ed0c.png
[20210710010939397.png]: /images/20221005/10abe4b89fbf49278870b471a11b788d.png
[2021071001101812.png]: https://img-blog.csdnimg.cn/2021071001101812.png
[20210710011019631.png]: /images/20221005/28cef42cbc62458fa592ac454e053324.png
[20210710011041462.png]: /images/20221005/23e18e5dde8a46e6a9df968971bfb75c.png
[20210710011047165.png]: /images/20221005/7b98b499a02940aab4b64e1e0cefaace.png
[20210710011107833.png]: https://img-blog.csdnimg.cn/20210710011107833.png
[20210710011110377.png]: /images/20221005/42f26a4f97954f80bb9e217db90ceb82.png
[20210710011206753.png]: /images/20221005/fec1f19b9f4f4ff4931b50f21ead6115.png
[20210710011208641.png]: /images/20221005/ef1e4ee12c7f4eefa53562b42bfb0347.png
[20210710011220432.png]: /images/20221005/16936b8e41cd414f9a504a3c8d9b8920.png
[20210710011222455.png]: /images/20221005/7069bcd9043c4d8daecc7162531aa8af.png
[20210710011304466.png]: https://img-blog.csdnimg.cn/20210710011304466.png
[20210710011304469.png]: /images/20221005/747adcb835c4484193372e5b7d2ba3d5.png
[2021071001141460.png]: https://img-blog.csdnimg.cn/2021071001141460.png
[2021071001141461.png]: /images/20221005/e201311e2f4447b98bdc812ed1b86198.png
[20210710011459784.png]: /images/20221005/65633c3d0f4541ca8df6aa2c146bd98d.png
[2021071001152977.png]: /images/20221005/fbdacb14b27849cf8a61880b37c58cb4.png
[20210710011530769.png]: /images/20221005/f2dad471a14343a6ae9808a3f6db0b06.png
[20210710011533450.png]: /images/20221005/b079e9335f954bdea905bb810e00ee94.png
[20210710011556451.png]: /images/20221005/4d74f79102d745488de019333f4124fa.png
[2021071001160231.png]: /images/20221005/19c8fd76c3fa4ce4a90b9ee08b5e5f2e.png
[20210710011616761.png]: /images/20221005/104f35338d1647a1935d99b38df76119.png
[20210710011631541.png]: /images/20221005/d4229b73fe2c4f04976c5602ae18d5de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/71dc1d6335db43c3a64beba8c111d918.png
[20210710011703660.png]: /images/20221005/1713bf0aa25244cda697bee6ef53a367.png
[20210710011739506.png]: https://img-blog.csdnimg.cn/20210710011739506.png
[20210710011741193.png]: /images/20221005/5b87aa9339784acb9929d076da6cd120.png
[20210710011758309.png]: /images/20221005/d9f51010474c434a8551d12da84b52b6.png
[20210710011837597.png]: https://img-blog.csdnimg.cn/20210710011837597.png
[20210710011840153.png]: /images/20221005/daaa6437453f4d6a974a70a6ab57bf17.png
[20210710011908496.png]: /images/20221005/223174d9494d4ede9cf86fa315476964.png
[20210710011955139.png]: /images/20221005/c48bcf76f818456bb39b4415a821d298.png
[20210710012012812.png]: /images/20221005/fb8e4703c8cb4caf94a878a3a7a1a882.png
[20210710012027423.png]: /images/20221005/01fcc0e36fd340998ef350cda1159f37.png
[2021071001203693.png]: https://img-blog.csdnimg.cn/2021071001203693.png
[20210710012038120.png]: /images/20221005/e40ca814026248f48a69cc55318f1069.png
[20210710012115534.png]: /images/20221005/059b1f5f5a824e64a34af1fccc14f633.png
[20210710012213784.png]: /images/20221005/1ab6bac9f9094cdab2826de0a2989162.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/8df58ac0da684130ab092bce79532da8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/9c1a525b54954e8596a2f91d2de3da67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/958a877d3cf54d4bac7498feb86065fc.png
[20210710012244340.png]: /images/20221005/3997eaa0ec214b0396d970151585b73b.png
[20210710012313235.png]: /images/20221005/2287367d00344586948f259a8eae9d79.png
[20210710012327435.png]: /images/20221005/5f22c1f978d240eba72d6910126f4e75.png
[20210710012330537.png]: /images/20221005/9fbf0d537206471394bfda1e18da1b0e.png
[20210710012336818.png]: /images/20221005/a25025a3fca942a6b7561681eb9f5126.png
[20210710012338805.png]: /images/20221005/092d9b97850e4533b637055d98bbfb69.png
[20210710012409692.png]: /images/20221005/6bfffb984e1746dca29903c9d6fdb747.png
[20210710012447412.png]: /images/20221005/389f8bd8908f4bc0859e82d4526c3704.png
[20210710012451497.png]: /images/20221005/342a8908c76c4e6c952476db434a95cb.png
[2021071001253539.png]: /images/20221005/e68008914bc94c4b8a6ffa53d77f69f9.png
[20210710012605513.png]: /images/20221005/bf279500d52746f2add3d6170387ea61.png
[2021071001261053.png]: /images/20221005/9b86b92284c54c2393c5b235095efcd2.png
[20210710012615198.png]: /images/20221005/d06bf3d6b89446bb9e670bfb6eff6562.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/4fc15b9d378b4cc3b858da4984480b76.png
[20210710012631190.png]: /images/20221005/c108ac8150134bfd80ae670dcf34e9af.png
[20210710012638689.png]: /images/20221005/ad2ab81ce39640f689b05f8d47f36280.png
[20210710012727539.png]: /images/20221005/b6fa5136c02242f880f16bcf25b17a7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/400503968d074d22b72ece82d6171b03.png
[20210710012759400.png]: /images/20221005/196b55e4fa33419bbccfe03d69edddd9.png
[2021071001280723.png]: /images/20221005/2d3dd9f8ac25418992d0aee8298e39f4.png
[20210710012809927.png]: /images/20221005/7643df6b57014c1a9e1c53905c30464b.png
[2021071001282377.png]: /images/20221005/799e83d802344b8eb0cdb26c1b6f6d9d.png
[20210710012825481.png]: /images/20221005/3ef859084ff94d3c85f8790636db851c.png
[20210710012827435.png]: /images/20221005/12002574b56f4f979d0aac3bf973b285.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/063bf802cdbc492790f657d75da94988.png
[20210710012942193.png]: /images/20221005/5ae4f111621a4d018ccfede70bb8e758.png
[20210710012952504.png]: /images/20221005/5ef372b113354ea5b883d523bbcfeff7.png
[20210710013020986.png]: /images/20221005/717241f434b943279f40f9c7fa2968f8.png
[20210716170551549.png]: /images/20221005/bb8d2992d9a643279aadd48611286f46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7]: /images/20221005/b1389cdab88b4dddb65d94ac51e67b42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8]: /images/20221005/fa96624e1b714fe59a0bdc04c9a18a46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9]: /images/20221005/9ffb535f151f45bbb3b56e4fea8a8715.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10]: /images/20221005/9da345c06e974d6897f6fce010b0722d.png
[20210716170813906.png]: https://img-blog.csdnimg.cn/20210716170813906.png
[20210716170815763.png]: /images/20221005/4c0338571b7942e68ae05310862103e4.png
[20210716170832385.png]: /images/20221005/c3c7778d456a4b4b9e5bd299e56753c9.png
[20210716170902597.png]: /images/20221005/e0c216e2a32841ecb2717bc0b1b1ecb8.png
[20210716170908755.png]: /images/20221005/5ba1c7c7ecca4f2baae044b6cea8ac70.png