版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012326462/article/details/82820251
首先看下面代码:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 mvvm-->
<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>
</body>
</html>
v-model: 在表单或者组件上创建双向绑定,这里绑定vue实例中的inputValue值。双向绑定的意思是指:vue实例中的inputValue值变化,页面上的值也会变化,页面上的值变化,vue实例中变量的值也会变化,也就是mvvm。
v-on: 绑定事件,这里绑定click事件,触发handleBtnClick这个方法
v-for:是循环,把list里面的值放到item中,然后再<li>标签中显示
页面显示效果如下,点击提交,元素会放到下面<ul>列表中