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 ...
随机推荐
- log4j使用快速入门【转】
1.引言 在应用程序中添加日志记录总的来说基于三个目的: .监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作 .跟踪代码运行时轨迹,作为日后审计的依据 .担当集成开发环境中的调 ...
- 【iOS测试】【随笔】崩溃日志获取
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5942779.html 本打算按照Android的套路去写, ...
- 超好用的网页栅格化工具： GridGuide
平面设计中使用栅格化设计是相当重要的,特别是网页和VI设计方面,在设计前都需要来好栅格,但是选择合适栅格和计算无疑是浪费了设计师不少的时间,然而当遇上今天的神器「GridGuide」在线工具,以后再也 ...
- ab post 测试 http 和 webservice 接口方法及用例
1.ab测试简单http请求 ab -n30000 -c1000 "http://10.1.1.21:8080/" 2.ab 测试 http 接口 (POST) ab -n400 ...
- Open Live Writer 安装
Open Live Writer来源 Windows Live Writer在2012年就停止了更新,Open Live Writer是由Windows Live WriterWriter更名而来,是 ...
- 去掉tableview顶部留白
self.automaticallyAdjustsScrollViewInsets = NO; //去掉tableVIew顶部留白
- 使用linq的好处
1.linq非常方便,把复杂的业务逻辑从数据库分离,起到了很好的优化作用 2.linq非常灵活,可以用基本统一的访问方式,访问各种数据源,对项目的管理和维护,起到了十分便捷的作用 3.用linq可以不 ...
- python之面向对象编程
1.面向对象介绍: 世界万物,皆可分类 世界万物,皆为对象 只要是对象,就肯定属于某种类 只要是对象,就肯定有属性 2. 面向对象的几个特性: class类: 一个类即对一类拥有相同属性的对象的抽象, ...
- ios-深度解析二维码的生成与使用
利用一个小demo来对二维码进行学习,总共四个界面(主界面,生成二维码界面,识别二维码界面,扫描二维码界面) 一.二维码的介绍 1.什么是二维码? 二维条码/二维码是用某种特定的 ...
- Molile App(HTTP/HTML)—Analyze Traffic