vue.js实现添加删除

最新推荐文章于 2024-04-16 05:02:37 发布

weixin_30852367

最新推荐文章于 2024-04-16 05:02:37 发布

阅读量231

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/TTTK/p/6226231.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图书馆增加书</title> 
  <script src="js/vue.js"></script>
  <style>
    ul{
      list-style: none;
      width:100px;
      height:auto;
    }
   
    .buttonstylelist{
      width:80px;
      height:30px;
      border:1px solid blue;
      color:#fff;
      background: blue;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
      <li v-for = "todo in todos" v-bind:style="stylelist">
          <span>{{todo.text}}</span>
      </li>
  </ul>
  <input type="text" v-on:keyup.enter="addTodo" v-model="message"/>
  <button v-on:click = "add" v-bind:class="buttonStyle">增加书籍</button>
  <button v-on:click="remove" v-bind:class="buttonStyle">删除</button>
</div>
 <script>
 var app = new Vue({
  el:'#app',
  data:{
    todos:[{text:'红楼梦'},{text:'水浒传'}],
    message:'',
    stylelist:{
      height:'30px',
      lineHeight:'30px',
      border:'1px solid red',
      textAlign:'center',
      background:'pink',
      color:'red'
    },
    buttonStyle:{
      'buttonstylelist':true
    }
  },
  methods:{
    remove:function(index){
      this.todos.splice(index,1)
    },
    addTodo:function(){
      var text = this.message.trim();
      if(text){
        this.todos.push({text:text});
        this.message=" ";
      }
    },
    add:function(){
      var text = this.message.trim();
      if(text){
        this.todos.push({text:text});
        this.message=" ";
      }
    }
  }
 })
 </script>
</body>
</html>

转载于:https://www.cnblogs.com/TTTK/p/6226231.html

weixin_30852367

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue.js实现添加删除

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图书馆增加书</title> <script src="js/vue.js"></script> <style> ...
复制链接

扫一扫