js循环数组添加新数据被替换问题_Vue.js 列表渲染的基本使用和动态调整

最新推荐文章于 2023-07-05 17:46:27 发布

weixin_39889597

最新推荐文章于 2023-07-05 17:46:27 发布

阅读量396

点赞数

文章标签： js循环数组添加新数据被替换问题

本文链接：https://blog.csdn.net/weixin_39889597/article/details/113580266

版权

本文介绍了Vue.js中如何使用`v-for`指令进行列表渲染，包括基本使用方法，如何动态调整列表内容，以及如何在`mounted`钩子中初始化事件监听逻辑。示例代码演示了如何在用户输入后将新数据添加到列表中，并展示了双向数据绑定的工作原理。

摘要由CSDN通过智能技术生成

我们继续介绍 Vue.js 框架的基本功能。

基本使用

在 Vue.js 中，可以通过 v-for 指令轻松实现列表渲染，在 vue_learning/basic 目录下新建 list.html，编写基于 Vue.js 实现的列表渲染代码如下：

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Listtitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
head>
<body>
<div id="app">
    Web 编程语言：
    <ul>
        <li v-for="language in languages">
            {{ language }}
        li>
    ul>
div>
<script>new Vue({el: '#app',data: {languages: ['PHP','JavaScript','Python','Golang','Java'
            ]
        },
    });script>
body>
html>

关于标签中的 Vue 实例代码非常简单，我们通过数组初始化了模型数据 languages，然后在 HTML 文档中通过如下代码循环渲染元素：

<li v-for="language in languages">
    {{ language }}
li>

v-for 指令可以循环迭代 languages，每个迭代项的值是 language，我们把这个迭代项输出到标签中作为列表项，迭代完成，列表页就渲染完成，预览该页面，对应的输出结果如下：

还可以通过 v-text 指令替代 {{ langugae }} 设置列表项的值：

for="language in languages" v-text="language">li>

输出结果和上面完全一样。

通过 v-for 指令进行循环迭代时，还支持获取数组索引：

<li v-for="(language, index) in languages">
    {{ index }}: {{ language }}
li>

对应输出结果如下：

动态调整列表

我们还可以结合数据绑定功能动态调整这个 HTML 列表：

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Listtitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">script>
head>
<body>
<div id="app">
    Web 编程语言：
    <ul>
        <li v-for="(language, index) in languages">
            {{ index }}: {{ language }}
        li>
    ul>
    <div>
        <input type="text" id="input"/>
        <button type="button" id="button">添加button>
    div>
div>
<script>var app = new Vue({el: '#app',data: {languages: ['PHP','JavaScript','Python','Golang','Java'
            ]
        },
    });document.querySelector('#button').addEventListener('click', () => {let language = document.querySelector('#input');
        app.languages.push(language.value);  // 将输入语言添加到模型数据数组
        language.value = '';  // 清空输入框
    });script>
body>
html>