Vue2.6-简单的ToDoList 增加列表项(MVVM)

最新推荐文章于 2024-06-25 10:16:38 发布

东陵十三

最新推荐文章于 2024-06-25 10:16:38 发布

阅读量272

点赞数 1

分类专栏：计算机服务器开发文章标签： Vue2.6 ToDoList MVVM

本文链接：https://blog.csdn.net/donglingjiu/article/details/100062187

版权

计算机同时被 3 个专栏收录

110 篇文章 0 订阅

订阅专栏

服务器

84 篇文章 0 订阅

订阅专栏

开发

73 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
   //MVVM 模式直接操作数据不涉及dom操作 vue底层自动根据数据渲染页面
       <title>ToDoList</title>
       <meta charset="UTF-8">

//引用 js

//输入框根据输入增加list input标签的value值与inputValue 通过v-model双向绑定
<input type='text' v-model="inputValue" />

//v-on:click="handleXXX" 标签指令绑定click事件触发函数 handleXXX v-on:click="handleBtnClick" 简写 @click="handleBtnClick"
<button v-on:click="handleBtnClick">submit</button>

<ul>

              //v-for='item in list' 标签指令 item遍历 list数组返回值存储在item
                <li v-for="item in list">{{item}}</li>
           </ul>
       </div>
       <script>

          //创建 vue实例
           var app = new Vue({
               el:'#app',     //定义实例控制dom区域

                //定义实例操作的数据
               data:{
                   list:[] ,
                   inputValue:''
               },

               //定义实例操作的事件
               methods:{
                   handleBtnClick:function(){
                       //alert(this.inputValue)
                       //this.list.push(this.inputValue)

                      //push 数组尾部插入   unshift 数组头部插入 pop数组尾部弹出 shift数组头部弹出
                       this.list.unshift(this.inputValue)
                       this.inputValue=''
                   }
               }

})
</script>

</body>
</html>