vue.js实现添加删除
<!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实现添加删除的更多相关文章
- 使用Bootstrap + Vue.js实现 添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
- vue.js简单添加和删除
这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...
- vue.js+SSH添加和查询
Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与 ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- js 查询 添加 删除 练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS数组添加删除
栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.原文: https://www.w3cplus.com/j ...
- Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- Vue+iview实现添加删除类
<style> .tab-warp{ border-bottom: solid 1px #e0e0e0; overflow: hidden; margin-top: 30px; posit ...
随机推荐
- 关于Hibernate 5 和 Hibernate 4 在创建SessionFactory的不同点分析（解决 org.hibernate.MappingException: Unknown entity: xx类报错问题）
Hibernate4版本的SessionFactory实例构建的步骤是这样的(也是很多学习资料的通用范本): //Configuration就是代表着hibernate的那个xml配置文件对象,如果c ...
- 阿里云服务器Linux CentOS安装配置（六）resin多端口配置、安装、部署
阿里云服务器Linux CentOS安装配置(六)resin多端口配置.安装.部署 1.下载resin包 http://125.39.66.162/files/2183000003E08525/cau ...
- BAT常用脚本汇总
1.取得时间戳 @echo off set date0=%date:~0,10% set hour0=%time:~0,2% set time0=%time:~0,2%%time:~3,2%%time ...
- MySQL 插入数据 通过命令提示窗口插入数据
MySQL 表中使用 INSERT INTO SQL语句来插入数据. 你可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 语法 以下为向MySQL数据表插 ...
- PMP--综合考试知识点，持续更新中。。。
1]盈亏平衡点＝固定成本/(销售价格-可变成本). 2]项目管理(Project Management): 就是把各种知识.技能.手段和技术应用于项目活动之中,以达到项目的要求. 3]有效的管理要求项 ...
- JAVASE02-Unit08： 文本数据IO操作 、 异常处理
Unit08: 文本数据IO操作 . 异常处理 * java.io.ObjectOutputStream * 对象输出流,作用是进行对象序列化 package day08; import java.i ...
- SQL 随记
内连接 select e.empno as 员工编号, e.ename as 员工名字, d.dname as 部门名字from emp e inner join dept d on e.deptno ...
- shell 除法 小数点
比如: num1=2 num2=3 num3=`echo "scale=2; $num1/$num2" | bc` 使用bc工具,sclae控制小数点后保留几位 还有一种方法 aw ...
- JSP 登录与注册的小案例之二（无验证码，前端拦截空参）
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
- Redis在Linux下的安装和启动和配置
第一步:下载Redis安装包,下载版本:3.0.5 在所在目录右键打开终端输入命令: wget http://download.redis.io/releases/redis-3.0.5.tar.gz ...