Vue学习笔记2.3 循环、事件绑定与双向绑定
1.循环:
<body>
<div id="app">
<input type="text">
<button>提交</button>
<ul>
<li v-for="item in List">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
List: ['第一个','第二个','第三个']
}
})
</script>
显示效果:
2.事件绑定:
<body>
<div id="app">
<input type="text">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in List">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
List: ['第一个','第二个','第三个']
},
methods: {
handleBtnClick: function() {
alert('我被点击了')
}
}
})
</script>
通过v-on:click绑定点击事件,“=”号后面跟函数名
效果:
3.双向绑定:
<body>
<div id="app">
<input type="text" v-model="inputvalue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in List">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
List: [],
inputvalue: ''
},
methods: {
handleBtnClick: function() {
alert(this.inputvalue)
}
}
})
</script>
</body>
效果图:
第一,通过input标签输入内容获取到信息
第二
通过赋值使input文本框显示相应的值
实现简单的TodoList功能:
<body>
<div id="app">
<input type="text" v-model="inputvalue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in List">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
List: [],
inputvalue: ''
},
methods: {
handleBtnClick: function() {
this.List.push(this.inputvalue)
this.inputvalue = ''
}
}
})
</script>
效果图:(通过input框输入内容点击提交,自动显示在下面的列表中)