Vue学习小案例

博主： xiaoxiao
发布时间：2021 年 11 月 17 日
858 次浏览
暂无评论
5545字数
分类： Vue 笔记 JavaScript 前端

<h2>品牌列表案例</h2><p>一. 案例效果<br><img src="https://www.xxhzm.cn/usr/uploads/2021/11/2165652365.png" alt="1.png" title="1.png"style=""></p><p>二. 整体实现步骤</p><ol><li>创建基本的 vue 实例</li><li>基于 vue 渲染表格数据</li><li>实现添加品牌的功能</li><li>实现删除品牌的功能</li><li>实现修改品牌状态的功能</li></ol><p>总结一下我在这个小案例中遇到的一些小问题</p><p><strong>第一个：</strong></p><p>input的id与label的for冲突问题，导致页面中状态点击任何一个都启用第一个<br>解决方法：<br>使用每一个list的id定义input的id跟label的for，解决冲突<br><img src="https://www.xxhzm.cn/usr/uploads/2021/11/10091058.png" alt="2.png" title="2.png"style=""></p><p><strong>第二个：</strong><br>添加新的品牌<br>解决办法：<br>定义brand为内容输入的内容<br>定义nextid为id</p><p>定义一个点击事件，在点击事件内声明一个object对象，里面添加用户输入的内容。最后将object插入到list内</p><p><img src="https://www.xxhzm.cn/usr/uploads/2021/11/1510829294.png" alt="3.png" title="3.png"style=""></p><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5bf1963ef345b277f6ed4fc827f5141d19" aria-expanded="true"><div class="accordion-toggle"><span style="">代码</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5bf1963ef345b277f6ed4fc827f5141d19" class="collapse in collapse-content"><p></p></p><pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;品牌列表案例&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./lib/bootstrap.css&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;./css/brandlist.css&quot;&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id=&quot;app&quot;&gt;
        &lt;!-- 卡片区域 --&gt;
        &lt;div class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
                添加品牌
            &lt;/div&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;!-- 添加品牌的表单区域 --&gt;
                &lt;form @submit.prevent=&quot;add&quot;&gt;
                    &lt;div class=&quot;form-row align-items-center&quot;&gt;
                        &lt;div class=&quot;col-auto&quot;&gt;
                            &lt;div class=&quot;input-group mb-2&quot;&gt;
                                &lt;div class=&quot;input-group-prepend&quot;&gt;
                                    &lt;div class=&quot;input-group-text&quot;&gt;品牌名称&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;请输入品牌名称&quot; v-model.trim=&quot;brand&quot;&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;col-auto&quot;&gt;
                            &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary mb-2&quot;&gt;添加&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;

&lt;!-- 表格区域 --&gt;
        &lt;table class=&quot;table table-bordered table-hover table-striped&quot;&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;品牌名称&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;状态&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;创建时间&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;操作&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr v-for=&quot;item in list&quot; :key=&quot;item.id&quot;&gt;
                    &lt;td&gt;{{ item.id }}&lt;/td&gt;
                    &lt;td&gt;{{ item.name }}&lt;/td&gt;
                    &lt;td&gt;
                        &lt;div class=&quot;custom-control custom-switch&quot;&gt;
                            &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; :id=&quot;'cb' + item.id&quot; v-model=&quot;item.status&quot;&gt;
                            &lt;label class=&quot;custom-control-label&quot; :for=&quot;'cb' + item.id&quot; v-if=&quot;item.status&quot;&gt;已启用&lt;/label&gt;
                            &lt;label class=&quot;custom-control-label&quot; :for=&quot;'cb' + item.id&quot; v-else&gt;已禁用&lt;/label&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                    &lt;td&gt;{{ item.time }}&lt;/td&gt;
                    &lt;td&gt;
                        &lt;a href=&quot;javascript:;&quot; @click=&quot;remove(item.id)&quot;&gt;删除&lt;/a&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;script src=&quot;./lib/vue-2.6.12.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        const vm = new Vue({
            el: '#app',

data: {
                // 品牌列表数据
                brand: '',
                nextid: 4,
                list: [{
                    id: 1,
                    name: '冰淇淋',
                    status: true,
                    time: new Date().toLocaleString()
                }, {
                    id: 2,
                    name: '兰蔻',
                    status: false,
                    time: new Date().toLocaleString()
                }, {
                    id: 3,
                    name: 'JavaScript',
                    status: true,
                    time: new Date().toLocaleString()
                }, ]
            },

methods: {
                remove(id) {
                    this.list = this.list.filter(item =&gt; item.id != id)
                },
                add() {
                    //如果用户填写的内容为空则return出去
                    if (this.brand === '') return alert('必须填写品牌名称');
                    //如果没有return出去，则执行添加方法

const obj = {
                        id: this.nextid,
                        name: this.brand,
                        status: true,
                        time: new Date().toLocaleString()
                    }

this.list.push(obj)

this.brand = ''
                    this.nextid++
                }
            },
        })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre><p><p></p></div></div></div></p>