<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello-vue</title>
</head>
<body>
<div id="app">
姓： <input type="text" name="" id="" value="" v-model="firstName" />
<hr />
名： <input type="text" name="" id="" value="" v-model="lastName" />
<hr />
结果：{{firstName + lastName}}
<hr />
<h1>管理食物</h1>
<div class="">
<span>添加食物:</span>
<input @keyup.enter="add" v-model="text" placeholder="What food?" autofocus="autofocus"/>
</div>
<ul>
<li v-for="food in foods">
<input type="checkbox" name="" id="" value="" v-model="food.complate"/>
{{ food.text }}
<button @click="destroy(food.text)">删除</button>
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!--引进vue.js，当前环境就会多出一个Vue全局变量-->
<script type="text/javascript">
(function(window){
foods = [{text:'辣条',complate:true},{text:'香蕉',complate:false},{text:'苹果',complate:true}];
var app = new Vue({
el: '#app',
data: {
firstName: 'hu',
lastName: 'sheng',
foods: foods,
text:''
},
methods:{
f:function(){
window.alert("aa");
},
add:function(){
if(this.text.trim().length === 0){
return
}
this.foods.push({
text:this.text,
complate:false
});
this.text = '';
},
destroy:function(text){
console.log(text);
var foodIndex;
this.foods.find(function(food,index){
if(food.text===text){
foodIndex = index;
}
});
this.foods.splice(foodIndex,1);
}
}
});
})(window);
</script>
</body>
<!--
笔记：
1，v-on:可以简写为@
-->
</html>
