vue.js添加删除内容demo

来源：互联网发布：化学实验软件中文版编辑：程序博客网时间：2024/05/22 01:55

运行效果如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>demo</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script><style>.add-text{  width:200px;  height: 28px;  padding:0 10px;}  .con{    width: 100%;    overflow: hidden;  }  .con li{    width:100%;    height: 30px;  }  .con li span{    display: inline-block;    width:300px;  }  .add-btn{    width: 80px;    height: 24px;  }</style></head><body> <div id="app">   <input class="add-text" v-model="newTodo" placeholder="请输入想输入的内容">   <ul class="con">     <li v-for="todo in todos">       <span>{{ todo.text }}</span>       <button v-on:click="removeTodo($index)">删除</button>     </li>   </ul>   <button class="add-btn" @click="addTodo">添加</button></div> <script type="text/javascript"> var vm = new Vue({   el: '#app',   data: {     newTodo: '',     todos: [       { text: '有梦想虽然不一定能实现' } ,      { text: '没梦想怎么能谈实现与否？' }     ]   },   methods: {     addTodo: function () {       var text = this.newTodo.trim() ;      if (text) {         this.todos.push({ text: text }) ;        this.newTodo = '' ;      }     },     removeTodo: function (index) {       this.todos.splice(index, 1) ;    }   }}); </script> </body> </html>

0 0