zoukankan      html  css  js  c++  java
  • vue 事件结合双向数据绑定实现todolist

    <template>
    
    
      <div id="app"> 
          
          <input type="text" v-model='todo' />
    
          <button @click="doAdd()">+增加</button>
    
          <br>
    
          <hr>
    
          <br>
    
          <ul>
    
            <li v-for="(item,key) in list">
    
              {{item}}   ----  <button @click="removeData(key)">删除</button>
            </li>
          </ul>
    
    
      </div>
    </template>
    
    <script>
    
        export default {     
          data () { 
            return {
              todo:'' ,
              list:[]
            }
          },
          methods:{
    
            doAdd(){
                //1、获取文本框输入的值   2、把文本框的值push到list里面
    
                this.list.push(this.todo);
    
                this.todo='';
            },
            removeData(key){
    
                // alert(key)
    
                //splice  js操作数组的方法
    
                this.list.splice(key,1);
            }
          }
    
        }
    </script>
    
    
    <style lang="scss">
    
    
    
    </style>
  • 相关阅读:
    DOM
    BOM
    JavaScript 转载
    CSS 转载
    html
    元类
    索引
    视图,触发器,事务,存储过程
    子查询,用户管理,pymysql使用
    完整的查询语句
  • 原文地址:https://www.cnblogs.com/loaderman/p/11057642.html
Copyright © 2011-2022 走看看