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

　　

vue.js实现添加删除的更多相关文章

  1. 使用Bootstrap + Vue.js实现 添加删除数据

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...

  2. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  3. vue.js+SSH添加和查询

    Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与 ...

  4. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  5. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. js 查询 添加 删除 练习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. JS数组添加删除

    栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: https://www.w3cplus.com/j ...

  8. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  9. Vue+iview实现添加删除类

    <style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...

随机推荐

  1. HTML5 history新特性pushState、replaceState

    DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...

  2. 多线程获取不到HttpContext

    问题一:多线程下获取文件绝对路径 当我们使用HttpContext.Current.Server.MapPath(strPath)获取绝对路径时HttpContext.Current为null,解决办 ...

  3. mysql 锁-比较详细、深入的介绍

    详见:http://www.cnblogs.com/chenpingzhao/archive/2015/12/13/5041967.html

  4. NONUNIFORM MEMORY ACCESS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION In terms of commercia ...

  5. Apache2 worker

    http://www.php-internals.com/book/?p=chapt08/08-03-zend-thread-safe-in-php 在多线程系统中,进程保留着资源所有权的属性,而多个 ...

  6. Java 三章错题

    1.每个类都使用Object作为超类.所以对象(包括数组)都实现这个类的方法. 2.在不明确给出超类的情况下,java会自动把object作为要定义的超类. 可以使用类型为Object的变量指向任意类 ...

  7. ubuntu server 12.04U盘安装，提示无法挂载安装光盘或光盘读取数据出错

    今天用Ultraiso将Ubuntu server 12.04 刻入U盘中安装系统,中间提示错误:1.检测不到cdrom(即U盘没有挂载上):2.从光盘中读取数据出错.问题如下图所示: 上网搜了下解决 ...

  8. h5 与app交互

    http://www.jianshu.com/p/7151987f012d JSContext *context = [self.webView valueForKeyPath:@"docu ...

  9. 建模分析之机器学习算法（附python&R代码）

    0序 随着移动互联和大数据的拓展越发觉得算法以及模型在设计和开发中的重要性.不管是现在接触比较多的安全产品还是大互联网公司经常提到的人工智能产品(甚至人类2045的的智能拐点时代).都基于算法及建模来 ...

  10. IOS遍历方式

    NSArray* arrays = @[@"1",@"2",@"3",@"4",@"5",@&quo ...