<!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. java.util.zip获取Zip文件条目InputStream

    package com.test; import java.io.BufferedInputStream; import java.io.ByteArrayInputStream; import ja ...

  2. MVC5 视图 不显示 Styles.Render Scripts.Render 问题解决

    第一步:安装 WebGrease 使用 nuget 安装 WebGrease 安装依赖 第二步:修改配置文件 <configSections> <!-- For more infor ...

  3. 总结-jQuery

    一.ajax提交,如果某个变量的值填的是doc对象,jQuery不报错,也没有反应,如: {userName : $('#userName')}.正确的写法 {userName : $('#userN ...

  4. Java基础语法

    java基础学习总结——基础语法1 一.标识符

  5. ORM系列之二:EF(4) 约定、注释、Fluent API

    目录 1.前言 2.约定 2.1 主键约定 2.2 关系约定 2.3 复杂类型约定 3.数据注释 3.1 主键 3.2 必需 3.3 MaxLength和MinLength 3.4 NotMapped ...

  6. 视觉机器学习读书笔记--------SVM方法

    SVM是一种二类分类模型,有监督的统计学习方法,能够最小化经验误差和最大化几何边缘,被称为最大间隔分类器,可用于分类和回归分析.支持向量机的学习策略就是间隔最大化,可形式化为一个求解凸二次规划的问题, ...

  7. C++求一个十进制的二进制中1的个数

    int oneNumInBinary(int n){ ; while(n){ n = n&(n-); cnt++; } return cnt; }

  8. css表示屏幕宽度和高度

    expression(document.body.offsetWidth + "px"); expression(document.body.offsetHeight + &quo ...

  9. 使用CTE减少统计子查询

    Set Statistics IO ON SET STATISTICS TIME ON --/*--原来语句 DECLARE @CkNo nvarchar(4000),@ProWarn int,@Sk ...

  10. spring session 和 spring security整合

    背景: 我要做的系统前面放置zuul. 使用自己公司提供的单点登录服务.后面的业务应用也是spring boot支撑的rest服务. 目标: 使用spring security管理权限包括权限.用户请 ...