vue.js添加删除内容demo

运行效果如下：demo.add-text{width:200px;height: 28px;padding:0 10px;}.con{width: 100%;overflow: hidden;}.con li{width:100%;height: 30px;}.con l

lucky芬

4220人浏览 · 2017-04-27 10:20:47

lucky芬 · 2017-04-27 10:20:47 发布

运行效果如下：

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^