zoukankan      html  css  js  c++  java
  • 第六课 点击事件调用自定义方法

    <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>
  • 相关阅读:
    菜鸟快速自学java00之变量类型
    php 接口和抽象类
    java 三大特性之多态性
    设计模式
    依赖注入
    Java设计模式工厂模式
    php 设计模式之策略模式
    大数的概述
    熟悉常用的Linux操作
    GridView动态添加列
  • 原文地址:https://www.cnblogs.com/netflix/p/14626499.html
Copyright © 2011-2022 走看看