vue.js基础（2）-列表与处理用户输入
2016-11-03 本文已影响408人
d33911380280
例子基于上一节，对列表以及处理用户输入的两个案例进行总结。
（1）列表
首先在html页面中，改写为如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue1</title>
<script type="text/javascript" src="../src/js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<ul>
<li v-for="person in persons">
{{ person.name }} loves {{person.love}}
</li>
</ul>
<input type="text" name="message" v-model="message" />
</div>
<script type="text/javascript" src="../src/js/vue1.js"></script>
</body>
</html>
var app = new Vue({
el: '#app',
data: {
message: "hello world",
persons: [
{name: "huhx", love: "code"},
{name: "chenhui", love: "book"}
]
}
});
（2）处理用户输入
处理用户输入主要依靠v-on。
在html中增加一行。
<button v-on:click="changeContent('huhx')">点击!</button>
在vue1.js中增加method部分。
var app = new Vue({
el: '#app',
data: {
message: "hello world",
persons: [
{name: "huhx", love: "code"},
{name: "chenhui", love: "book"}
]
},
methods:{
changeContent:function(element){
this.message="i love"+element;
}
}
});
