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 ...
随机推荐
- JMeter 响应文本乱码处理
首次安装Jmeter后,会出现响应文本乱码现象,处理办法如下: (1)修改默认编码方式 Jmeter安装目录/bin/jmeter.properties中sampleresult.default.en ...
- redis 简单应用
Incr $views = Redis::incr('views'); $article_views = Redis::incr('article:' . $article_id . ':views' ...
- c语言编程
1.常量和变量:变量是一块内存空间,该内存空间有类型约束,该内存中存放的数据可变. 变量三要素:类型,名称,值.常量:常量的数据永远不变,a:自变量,b:符合常量,c:预定义常量. 2.运算符和返回类 ...
- bootstrap 部分css样式
clip: rect(0, 0, 0, 0);剪裁绝对定位元素.outline: 0; cursor: not-allowed;
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- window的对象有哪些（笔记）
window的主对象主要有如下几个: document 对象: frames 对象: history 对象: location 对象: navigator 对象: screen 对象: 全局变量和函数 ...
- imx6 Image Vector Table (IVT)
imx6开启启动之后,运行板子上的ROM程序.ROM确定启动的设备,进行一些初始化,然后读取IVT,进行寄存器初始化,最后运行uboot/cpu/arm_cortexa8/start.S中的_star ...
- iOS：崩溃统计工具Crashlytics的使用
一.介绍 随着苹果在世界火热起来,移动端app的开发如火如荼,同时催生出了一批对app进行统计的开发工具,诸如:国内的友盟统计.国外的Flurry移动端统计.国外的Crashlytics统计等,Cra ...
- charles Mock测试总结
转载:http://www.jianshu.com/p/03081c9d1559 1.背景 测试存在问题:1.测试环境接口不稳定2.业务系统不是孤立存在的,关联方太多,而且关联系统常常出现不稳定的情况 ...
- Windows Server 2008 R2组策略创建用户桌面快捷方式
问题: 如何让所有域用户桌面有一个公司共享的快捷方式,让所有域用户直接双击就能打开公司共享. 解决办法: 1.创建一个zhuyu组织单元 ----- 在zhuyu组织单元创建一个域用户user1. 2 ...