手把手教你VUE从入门到放弃—— 篇三（进一步理解双向绑定,以及常用命令...）

原创于 2019-10-24 01:53:23 发布 · 206 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍如何使用Vue.js框架的v-model实现双向数据绑定，以及通过v-on:click指令响应用户点击事件，将输入框内容添加到列表中。文章通过具体示例代码展示了MVVM模式下数据操作与DOM更新的联动，适合初学者快速上手Vue.js。

1.实现如下效果输入框内输入什么点击提交就往,下面li列表中加什么

2.实现步骤

(1)使用v-model实现双向绑定，即：改变输入框的值就改变listVal变量的值，改变listVal变量的值就改变输入框的值

(2)v-on:click 添加按钮事件,然后vue对象 app内添加methods项，里面添加方法实现使用push方法往li添加数据

3.源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mvvm 双向绑定与几种常用命令 v-for v-on:click</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = "app">
<input type = "text" v-model='listVal'/ >
<button v-on:click="putToList">提交</button>
<ul >
   <li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var app = new Vue({
el: '#app',
data: {
list: [],
listVal:''
},
methods:{
   putToList: function(){
       this.list.push(this.listVal);
       this.listVal = '';
   }

}
});

   </script>
</body>

</html>