<!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. Docker compose学习笔记

    一.compose compose 作用 你的应用可能需要很多个服务,比如web服务,数据库服务,缓存服务等等.我们可以把这些服务放到单独的容器里面,如果手工去配置这些服务会有些麻烦,docker c ...

  2. reg

    <div class="login-module"> <div class="wide c login"> <form id=&q ...

  3. Objective的字符串拼接 似乎没有Swift方便,但也可以制做一些较为方便的写法

    NSString *str1 = @"字符串1"; NSString *str2 = @"字符串2"; //在同样条件下,Objective的字符串拼接 往往只 ...

  4. select case巧用 oracle

    在做报表的时候,经常会用到分段统计数据,这时候,case就比较有用了: 小例子: SELECT   sh.dc_code, g.bg_code,                   TO_CHAR ( ...

  5. 【leetcode】两数之和

    https://leetcode.com/problems/two-sum/ Example: Given nums = [2, 7, 11, 15], target = 9, Because num ...

  6. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  7. 各种同步方法性能比较(synchronized,ReentrantLock,Atomic)

    synchronized: 在资源竞争不是很激烈的情况下,偶尔会有同步的情形下,synchronized是很合适的.原因在于,编译程序通常会尽可能的进行优化synchronize,另外可读性非常好,不 ...

  8. javascript的缓动效果

    这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...

  9. My Baits入门（一）mybaits环境搭建

    1)在工程下引入mybatis-3.4.1.jar包,再引入数据库(mysql,mssql..)包. 2)在src下新建一个配置文件conf.xml <?xml version="1. ...

  10. IntelliJ IDEA 12 与 Tomcat7 配置

    IDEA 全称 IntelliJ IDEA,是java语言开发的集成环境,IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具( ...