image.png
    image.png

    1. <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    2. </head>
    3. <body>
    4.     <!-- 
    5.         1.数据驱动,不用频繁的操作DOM
    6.         vue中 属性接收变量的情况下 前面要放置一个冒号
    7.      -->
    8.      <div id="app">
    9.         <p><input type="text" v-model="keyword"> <button @click="handleAdd">添加</button></p>
    10.         <p>{{keyword}}</p>
    11.         <ul>
    12.             <li v-for="(item,index) of arr" 
    14.             :data-index="index"
    15.             @click="handleDelete">{{item}} -{{index}}</li>
    16.         </ul>
    17.     </div>
    18.     <script>
    19.         new Vue({
    20.             el:"#app",
    21.             data:{
    22.                 arr:["小米","华为","苹果"],
    23.                 keyword:""
    24.             },
    25.             methods:{
    26.                 handleAdd(){
    27.                     this.arr.push(this.keyword)
    28.                 },
    29.                 handleDelete(event){
    30.                     var index = event.target.dataset.index;
    31.                     this.arr.splice(index,1)
    32.                 }
    33.             }
    34.         })
    35.     </script>