Vue入门 Demo2 实现TodoList(v-model,v-if,v-for)完成输入框点击按钮提交数据在下方列表展示并且点击列表数据自动删除数据

最新推荐文章于 2021-01-17 13:19:46 发布

城南花已开呀

最新推荐文章于 2021-01-17 13:19:46 发布

阅读量396

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36778310/article/details/104634708

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue入门 Demo2 实现TodoList(v-model,v-if,v-for)完成输入框点击按钮提交数据在下方列表展示并且点击列表数据自动删除数据

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>TodoList</title> 
        <script src="./vue.js"></script>
    </head> 
    <body> 
       <div id="app">
           <!--v-model 双向绑定inputValue-->
           <input type="text" v-model="inputValue"/>
           <!--点击button将加载点击事件-->
           <button v-on:click="handlerBtnClick">提交</button>
           <ul>
               <li v-for="item in list">{{item}}</li>
           </ul>
       </div>
          
       <script>
           var app = new Vue({
               el: '#app',
               data: {
                   list: [],
                   inputValue: '',
               },
               //点击事件加载需要在methods方法中
               methods: {
                  handlerBtnClick: function() {
                    //   alert(this.inputValue);
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                  }
               }
           })
       </script>
    </body> 
</html>

效果如下表:
在这里插入图片描述

城南花已开呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门 Demo2 实现TodoList(v-model,v-if,v-for)完成输入框点击按钮提交数据在下方列表展示并且点击列表数据自动删除数据

Vue入门 Demo2 实现TodoList(v-model,v-if,v-for)完成输入框点击按钮提交数据在下方列表展示<!DOCTYPE html><html lang="en"> <head> <meta content="text/html; charset=utf-8" /> <ti...
复制链接

扫一扫

专栏目录