时间戳

首页 > 解决方案 > Vue.js 和从未显示的输入值

javascript - Vue.js 和从未显示的输入值

问题描述

我正在用 Vue.js 制作一个简单的购物清单应用程序，我很好奇是否有一种标准的方式来做我需要做的事情。我有一个带有添加和删除按钮的项目列表：

购物清单应用

const app = new Vue({
    el: '#app',
    data: {
        items: [
            'Chocolate',
            'Pizza',
            'Coca-Cola',
        ],
        newItem: ''
    },
    template: `
        <div>
            <div>{{ items.length }} item{{ items.length !== 1 ? 's' : '' }}</div>
            <ul>
                <li v-for="(item, index) of items">
                    {{ item }}
                    <button @click="deleteItem(index)">X</button>
                </li>
                <li>
                    <input type="text" v-model="newItem" placeholder="Item name">
                    <button @click="addItem">+</button>
                </li>
            </ul>
        </div>
    `,
    methods: {
        addItem() {
            const item = this.newItem.trim();
            if (item === '') return;
            this.items.push(item);
            this.newItem = '';
        },
        deleteItem(index) {
            this.items.splice(index, 1);
        }
    }
});

它可以正常工作，但我不确定是否使用从未在任何地方显示的数据输入。还有另一种方法$refs：

const app = new Vue({
    el: '#app',
    data: {
        items: [
            'Chocolate',
            'Pizza',
            'Coca-Cola',
        ],
    },
    template: `
        <div>
            <div>{{ items.length }} item{{ items.length !== 1 ? 's' : '' }}</div>
            <ul>
                <li v-for="(item, index) of items">
                    {{ item }}
                    <button @click="deleteItem(index)">X</button>
                </li>
                <li>
                    <input type="text" placeholder="Item name" ref="newItem">
                    <button @click="addItem($refs.newItem.value)">+</button>
                </li>
            </ul>
        </div>
    `,
    methods: {
        addItem(item) {
            item = item.trim();
            if (item === '') return;
            this.items.push(item);
            this.$refs.newItem.value = '';
        },
        deleteItem(index) {
            this.items.splice(index, 1);
        }
    }
});

v-model我没有使用单独的数据输入和，而是$refs直接使用。这些方法中的任何一种在 Vue.js 社区或指南中是否被更广泛地接受？或者也许有更流行的方式？

标签： javascriptvue.js

解决方案

我只是想在这里分享我的观点。我个人喜欢使用它，v-model因为它提供了一些额外的好处，例如：

  • 我们可以使用.trim修饰符v-model自动修剪用户输入中的空白，例如：

    <input v-model.trim="msg">

    这样您就不需要编写额外的代码来修剪文本，例如item = item.trim();. 这里保存了几行代码。

  • 使用this.newItem = ''我们可以使用反应性功能在按钮单击后轻松清除先前输入的文本v-model。所以，再次减少代码行而不是做this.$refs.newItem.value = '';

  • 使用的另一个优点v-model是，而不是做

    <button @click="addItem($refs.newItem.value)">

    您可以简单地调用该函数，例如：

    <button @click="addItem">

因此，您可以看到这些是使用 simple 的几个好处v-model，这主要与开发人员体验 (DX) 的观点有关。

工作演示：

const app = new Vue({
    el: '#app',
    data: {
        items: [
            'Chocolate',
            'Pizza',
            'Coca-Cola',
        ],
        newItem: ''
    },
    template: `
        <div>
            <div>{{ items.length }} item{{ items.length !== 1 ? 's' : '' }}</div>
            <ul>
                <li v-for="(item, index) of items">
                    {{ item }}
                    <button @click="deleteItem(index)">X</button>
                </li>
                <li>
                    <input type="text" placeholder="Item name" v-model.trim="newItem">
                    <button @click="addItem">+</button>
                </li>
            </ul>
        </div>
    `,
    methods: {
        addItem() {
            if (this.newItem === '') return;
            this.items.push(this.newItem);
            this.newItem = '';
        },
        deleteItem(index) {
            this.items.splice(index, 1);
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="app">
</div>

推荐阅读