data中数组为简单数组时 添加相同元素 原先已渲染的元素会被替换,console.log输出元素与显示 重复的元素 只渲染了一次
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello vue.js</title>
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js'></script>
</head>
<body>
<!-- this is view -->
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>索引:{{ $index }} 数据:{{ todo }}</span>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push(text)
console.log(this.todos);
this.newTodo = ''
}
}
}
})
</script>
</html>
福卡
guogu82
相关分类