1,v-for指令
根据数据生成列表结构
<div id='app'>
<input type="button" value="添加数据" @click="add">
<input type="button" value="删除数据" @click="remove">
<ul>
<li v-for="(item,index) in arr">
测试的：{{index+1}}{{item}}
</li>
</ul>
<h2 v-for="item in haochi" :title="item.name">
{{item.name}}
</h2>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
var app = new Vue({
el: '#app',
data: {
arr: ["江苏", "浙江", "安徽"],
haochi: [
{ "name": "苹果好吃" },
{ "name": "西瓜好吃" },
]
},
methods: {
add:function(){
this.haochi.push(
{ "name": "梨子好吃吧" },
);
},
remove:function(){
this.haochi.shift();
},
},
})
</script>2，v-on补充
传递自定义参数，事件修饰符 .enter 是回车事件
<div id='app'>
<input type="button" value="点击" @click="doit(666,'老铁')">
<input type="text" @keyup.enter="sayhi">
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
var app = new Vue({
el: '#app',
data: {
},
methods: {
doit:function(p1,p2){
console.log("做IT");
console.log(p1);
console.log(p2);
},
sayhi:function(){
alert("测试好了没")
}
},
})
</script>3，v-model指令
获取和设置表单元素的值（双向数据绑定）
<div id='app'>
<input type="button" value="修改信息" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
var app = new Vue({
el: '#app',
data: {
message:"VUE程序员",
},
methods: {
getM:function(){
alert(this.message)
},
setM:function(){
this.message="前端程序员"
}
},
})
</script>