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

例子地址

https://gitee.com/wangsiman/wuhannotebook/blob/master/typescript/js-day05/08vue.html