例子基于上一節(jié)辈灼，對(duì)列表以及處理用戶(hù)輸入的兩個(gè)案例進(jìn)行總結(jié)臭猜。
（1）列表
首先在html頁(yè)面中瓶珊，改寫(xiě)為如下代碼：
<!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）處理用戶(hù)輸入
處理用戶(hù)輸入主要依靠v-on夹界。
在html中增加一行戈次。
<button v-on:click="changeContent('huhx')">點(diǎn)擊!</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;
}
}
});
