Vue 2 入门学习笔记3.列表
- 本系列文章为
laracasts.com的系列视频教程——Learn Vue 2: Step By Step 的学习笔记。若喜欢该系列视频，可去该网站订阅后下载该系列视频，支持正版。- 视频源码地址：github.com/laracasts/Vue-Forms
- 项目初始版本为
Vue 2.1.3，教程还在更新中。
本节说明
- 对应第 3 小节：Lists
本节内容
本节我们来学习v-for循环。首先我们定义names，并显示出来：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="root">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
</div>
<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#root',
data: {
names:['Joe','Jack','Jane','Mike']
}
});
</script>
</body>
</html>
接下来我们加点新东西：我们添加一个输入框跟按钮，点击按钮时将输入框中的名字添加到名字列表中。本节我们先使用常规的JavaScript方式：
index.html
.
.
<div id="root">
<ul>
<li v-for="name in names" v-text="name"></li>
</ul>
<input type="text" id="input">
<button id="button">Add a name</button>
</div>
.
.
<script>
var app = new Vue({
el:'#root',
data: {
names:['Joe','Jack','Jane','Mike']
}
});
document.querySelector('#button').addEventListener('click',() => {
let name = document.querySelector('#input');
app.names.push(name.value);
name.value = '';
});
</script>
.
.然后我们查看效果：
下一节我们将采用Vue的方式实现此效果。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：