前端必知必会-Vue v-model 指令

文章目录

• Vue v-model 指令
• • 双向绑定
  • 动态复选框
  • 在购物清单中标记找到的商品
  • 使用 v-model 使表单本身动态化
  • 总结

    ---

    Vue v-model 指令

    与普通 JavaScript 相比，在 Vue 中使用表单更容易，因为 v-model 指令以相同的方式与所有类型的输入元素连接。

    v-model 在输入元素值属性和 Vue 实例中的数据值之间创建链接。更改输入时，数据会更新，数据更改时，输入也会更新（双向绑定）。

    双向绑定

    v-model 提供了双向绑定，这意味着表单输入元素会更新 Vue 数据实例，而 Vue 实例数据的更改会更新输入。

    以下示例还演示了使用 v-model 的双向绑定。

    示例

    双向绑定：尝试在输入字段内写入，以查看 Vue 数据属性值是否得到更新。还可以尝试直接在代码中写入以更改 Vue 数据属性值，运行代码，并查看输入字段如何更新。

    
    
     {{ inpText }} 
    
    
    
    const app = Vue.createApp({
    data() {
    return {
    inpText: 'Initial text'
    }
    }
    })
    app.mount('#app')
    
    

    注意：v-model 双向绑定功能实际上可以通过结合使用 v-bind:value 和 v-on:input 来实现：

    v-bind:value 用于从 Vue 实例数据更新输入元素，

    以及 v-on:input 用于从输入更新 Vue 实例数据。

    但 v-model 更易于使用，所以我们将这样做。

    动态复选框

    我们在上一篇的购物清单中添加了一个复选框，以标记某项是否重要。

    在复选框旁边，我们添加了一个文本，该文本始终反映当前的“重要”状态，在“真”或“假”之间动态变化。

    我们使用 v-model 添加此动态复选框和文本以改善用户交互。

    我们需要：

    
    （图片来源网络，侵删）

    Vue 实例数据属性中名为“重要”的布尔值

    一个复选框，用户可以在其中检查该项目是否重要

    
    （图片来源网络，侵删）

    动态反馈文本，以便用户可以看到该项目是否重要

    以下是“重要”功能的外观，与购物清单隔离。

    
    （图片来源网络，侵删）

    示例

    复选框文本被设为动态的，以便文本反映当前复选框的输入值。

    
    
    
    重要项目？
    
    
    {{ important }}
    
    
    
    
    
    
    const app = Vue.createApp({
    data() {
    return {
    important: false
    }
    }
    })
    app.mount('#app')
    
    

    让我们将此动态功能包含到我们的购物清单示例中。

    示例

    
    
    添加商品
    商品名称：
    数量：
    
    重要吗？
    
    
    {{ important }}
    
    
    添加商品
    
    购物清单：
    {{item.name}}, {{item.number}}} 
    
    
    
    const app = Vue.createApp({
    data() {
    return {
    itemName: null,
    itemNumber: null,
    important: false,
    shoppingList: [
    { name: 'Tomatoes', number: 5, important: false }
    ]
    }
    },
    methods: {
    addItem() {
    let item = {
    name: this.itemName,
    number: this.itemNumber
    important: this.itemImportant
    }
    this.shoppingList.push(item)
    this.itemName = null
    this.itemNumber = null
    this.itemImportant = false
    }
    }
    })
    app.mount('#app')
    
    

    在购物清单中标记找到的商品

    让我们添加功能，以便将添加到购物清单中的商品标记为已找到。

    我们需要：

    列表项在点击时做出反应

    将点击项目的状态更改为“已找到”，并使用它以可视方式将项目移开并使用 CSS 将其删除

    我们创建一个包含我们需要查找的所有项目的列表，并在下方创建一个包含已找到项目的列表，并删除已找到的项目。我们实际上可以将所有项目放在第一个列表中，将所有项目放在第二个列表中，然后只需使用 v-show 和 Vue 数据属性“found”来定义是否在第一个或第二个列表中显示该项目。

    示例

    将项目添加到购物清单后，我们可以假装去购物，找到项目后单击它们。如果我们错误地单击了某个项目，我们可以通过再次单击该项目将其返回到“未找到”列表。

    
    
    添加项目
    项目名称：
    数量：
    
    重要吗？
    
    
    {{ important }}
    
    
    添加商品
    
    购物清单：
    ​​
    {{ item.name }}, {{ item.number}}
    
    ​​
    ​​
    {{ item.name }}, {{ item.number}}
    
    
    
    
    const app = Vue.createApp({
    data() {
    return {
    itemName: null,
    itemNumber: null,
    important: false,
    shoppingList: [
    { name: 'Tomatoes', number: 5, important: false, found: false }
    ]
    }
    },
    methods: {
    addItem() {
    let item = {
    name: this.itemName,
    number: this.itemNumber,
    important: this.itemImportant,
    found: false
    }
    this.shoppingList.push(item)
    this.itemName = null
    this.itemNumber = null
    this.itemImportant = false
    }
    }
    })
    app.mount('#app')
    
    

    使用 v-model 使表单本身动态化

    我们可以制作一个表单，让客户从菜单中订购。为了方便客户，我们只在客户选择订购饮料后才显示可供选择的饮料。可以说，这比一次向客户展示菜单中的所有项目更好。在此示例中，我们使用 v-model 和 v-show 使表单本身动态化。

    我们需要：

    带有相关输入标签和“订购”按钮的表单。

    用于选择“晚餐”、“饮料”或“甜点”的单选按钮。

    选择类别后，将出现一个下拉菜单，其中包含该类别中的所有项目。

    选择项目后，您会看到它的图像，您可以选择数量并将其添加到订单中。将项目添加到订单后，表单将重置。

    示例

    此表单是动态的。它会根据用户的选择而变化。用户必须先选择类别，然后选择产品和数量，然后订购按钮才会显示出来，然后用户可以订购。

    ---

    总结

    本文介绍了Vue v-model 指令的使用，如有问题欢迎私信和评论