vue基础之data存储数据及v-for循环用法示例

本文实例讲述了vue data存储数据及v-for循环用法。分享给大家供大家参考，具体如下： vue data里面存储数据 &lt;!DOCTYPE html> &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;www.jb51.net vue data里面存储数据&lt;/title&gt; &lt;style&gt; &lt;/style&gt; [removed][removed] [removed] [removed]=functi Vue.js 是一个流行的前端框架，用于构建用户界面。在 Vue 中，`data` 是一个非常重要的属性，用于声明应用中的初始数据。在这个实例中，我们看到了如何在 Vue 实例中定义和使用 `data`。 让我们看看 `data` 的基本用法。在 Vue 实例化时，`data` 是一个函数，返回一个对象，这个对象包含了组件的所有可响应的数据。例如： ```javascript new Vue({ el: 'body', data() { return { msg: 'welcome vue', msg2: 12, msg3: true, arr: ['apple', 'banana', 'orange', 'pear'], json: { a: 'apple', b: 'banana', c: 'orange' } }; } }); ``` 这里，`msg`, `msg2`, `msg3`, `arr` 和 `json` 是在 `data` 对象中定义的属性，它们是 Vue 可响应的，意味着当这些属性的值发生变化时，视图会自动更新以反映这些变化。 在 HTML 模板中，我们可以使用双大括号 `{{ }}` 来插值显示 `data` 中的数据。例如： ```html <input type="text" v-model="msg"> <br> {{msg}} <br> {{msg2}} <br> {{arr}} <br> {{json}} ``` `v-model` 指令用于双向绑定数据，使得输入框的值与 `msg` 属性同步。 接下来，我们讨论 `v-for` 循环，它是 Vue 中用于渲染列表的指令。在 Vue 中，有多种方式来遍历数组和对象。 1. 遍历数组： ```html <li v-for="value in arr">{{value}} {{$index}}</li> ``` 这里，`value` 是数组中当前项的值，`$index` 是当前项的索引。 2. 遍历对象： ```html <li v-for="(key, value) in json">{{key}} {{value}} {{$index}} {{$key}}</li> ``` 在遍历对象时，`key` 是对象属性的键，`value` 是对应的值，`$index` 在 Vue 2.5.0+ 版本中不再提供，但在某些旧版本中可能有用，`$key` 提供了与 `key` 相同的值。 注意，`v-for` 指令要求在每个迭代元素周围有一个唯一的根元素，比如 `<ul>` 和 `<li>`。 在实际应用中，`v-for` 往往配合 `v-if` 或 `v-bind`（简写 `:`）等其他指令一起使用，以实现更复杂的逻辑。此外，`v-for` 也可以与 `track-by` 或 `key` 属性一起使用，以便于优化性能和维护状态。 Vue.js 的 `data` 和 `v-for` 是构建动态用户界面的基础，它们允许开发者轻松地处理和展示数据。理解并熟练掌握这两个概念对于学习和使用 Vue.js 至关重要。在开发过程中，你可以利用在线的 HTML/CSS/JavaScript 代码运行工具，如文中提到的 http://tools.jb51.net/code/HtmlJsRun，来测试和调试你的 Vue 代码。这有助于加深理解，并提高开发效率。