vue.js添加删除内容demo

最新推荐文章于 2024-08-08 19:57:45 发布

原创最新推荐文章于 2024-08-08 19:57:45 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个简单的Vue.js应用实例介绍了如何实现文本输入、列表项添加及删除功能。该示例使用Vue.js框架创建了一个可以动态更新的待办事项列表，用户能够输入文本并将其添加到列表中，同时提供了删除列表项的功能。

运行效果如下：

<!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>