<!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. 奥迪--A3

    -型号:A3 -价格:18-28W -动力:1.4T/1.8T -变速箱:7挡双离合 -长宽高:4.32,1.79,1.43(Limousine:4.46,1.80,1.42) -油箱:50L -发动 ...

  2. Signing Data

    Signing Data with CNG http://msdn.microsoft.com/en-us/library/windows/desktop/aa376304(v=vs.85).aspx

  3. PHPUnit入门

    PHPUnit是PHP语言的单元测试框架.工具,xunit单元测试工具系列成员之一,可以单独运行在Linux或windows系统下面,也可以集成到zend studio等IDE工具中. 工具下载:ht ...

  4. 「iOS造轮子」之UIButton 用Block响应事件

    俗语说 一个不懒的程序员不是好程序员 造轮子,也只是为了以后更好的coding. coding,简易明了的代码更是所有程序员都希望看到的 无论是看自己的代码,还是接手别人的代码 都希望一看都知道这代码 ...

  5. Runtime详解

    http://yulingtianxia.com/blog/2014/11/05/objective-c-runtime/

  6. RunLoop相关知识的总结

    RunLoop 即运行循环,也叫事件循环,本质为一个死循环.iOS一个程序运行起来之后,默认会开启一个运行循环,有需要处理的操作时,比如用户的输入事件时,RunLoop会自己跑起来运行,没有需要处理的 ...

  7. Selenium2学习-042-Selenium3启动Firefox Version 48.x浏览器（ff 原生 geckodriver 诞生）

    今天又被坑了一把,不知谁把 Slave 机的火狐浏览器版本升级为了 48 的版本,导致网页自动化测试脚本无法启动火狐的浏览器,相关的网页自动化脚本全线飘红(可惜不是股票,哈哈哈...),报版本不兼容的 ...

  8. python 数据分析--词云图，图形可视化美国竞选辩论

    这篇博客从用python实现分析数据的一个完整过程.以下着重几个python的moudle的运用"pandas",""wordcloud"," ...

  9. java测试框架整理

    Test: Junit4+Hamcrest 不多说了,就靠着两个 import static org.hamcrest.Matchers.equalTo; import static org.juni ...

  10. C#异常处理性能测试

    异常处理性能测试 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq ...