vue.js-读取/发送数据
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>vue-读取/发送数据</title>
<style type="text/css">
* {
margin: 0;
padding: 0
} table,
td {
border: 1px solid #cccccc;
border-collapse: collapse;
} table {
width: 1090px;
margin: 20px auto;
} tr {
line-height: 30px;
} td {
text-align: center;
} .demo_input {
width: 500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
} .demo_input input {
width: 200px;
height: 30px;
margin: 5px auto;
}
</style>
<script src="js/vue.js"></script>
<script src="js/jquery.js"></script> </head> <body> <div id="demo">
<table border="1">
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
<tr v-for="books in book">
<td>{{books.id}}</td>
<td>{{books.name}}</td>
<td>{{books.author}}</td>
<td>{{books.price}}</td>
</tr>
<tr>
<td colspan="4"><button v-on:click="showData">点我</button></td>
</tr>
</table> <hr />
<div class="demo_input">
<p>账号：<input type="text" placeholder="请输入账号" id="name" /></p> <p>密码：<input type="text" placeholder="请输入密码" id="pwd" /></p>
<p>
<!--<button onclick="login()">登录</button>-->
<button v-on:click="login()">登录</button>
</p>
</div>
</div>
<script>
/*vue结合ajax数据读取*/
var demo = new Vue({
el: '#demo',
data: {
book: '',
},
mounted: function() {
var _self = this;
$.ajax({
type: "get",
url: "vue.json",
dataType: "json",
success: function(data) {
_self.book = data.books;
console.log(_self.book)
}
});
},
methods: {
showData: function() {
var _self = this;
$.ajax({
type: "get",
url: "vue.json",
dataType: "json",
success: function(data) {
_self.book = data.books;
console.log(_self.book)
}
});
},
login: function() {
$.ajax({
type: "get",
url: "aaa.php",
data: {
"name": $("#name").val(),
"pwd": $("#pwd").val(),
},
dataType: "text",
success: function() {
console.log("成功了")
}
});
}
} })
</script>
</body> </html>
vue.js-读取/发送数据的更多相关文章
- js读取json数据（php传值给js）
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- Vue.js学习 Item4 -- 数据双向绑定
Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...
- Vue.js连接后台数据jsp页面 ￣▽￣
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
- vue.js 三（数据交互）isomorphic-fetch
至于fetch的介绍,在这里就不多说了,官方和网络上的说明不少 之前使用jquery的Ajax朋友,可以尝试一下使用一下这个新的api 推荐使用isomorphic-fetch,兼容Node.js和浏 ...
- js读取json数据
{ "code": 0, "msg": null, "data": { "pageNum": 1, "page ...
- 实现js读取Excel数据
如何通过js去读取excel中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- Scala简介及基础语法
一.scala简介 官网:https://www.scala-lang.org/ Scala语言很强大,集成了面向对象和函数式编程的特点. 运行在JVM(jdk). 大数据中为什么学习scala? s ...
- java观察者(Observer)模式
观察者模式: 试想,在电子商务网站上,一个用户看中了一件一份,但是当时衣服的价格太贵,你需要将衣服收藏,以便等衣服降价时自动通知该用户.这里就是典型的观察模式的例子. 1.观察者模式的 ...
- CMDB内功心法，助我登上运维之巅
很多70.80后甚至90后都在金庸.古龙.梁羽生先生等武林大家熏陶下成长的,这么多年过去了,我的武侠梦依然不曾散去.曾几何,梦想有一天练就一身绝学,搂着小师妹花前月下,仗剑走天涯,快意人生.可每次的酣 ...
- 三个小时学会wordpress模板制作
最近接了一个项目需要用wordpress建站,版面相对简单,ytkah就琢磨着自己来设计wordpress模板,首页栏目页文章页(很多网站无外乎就这些页面),其中栏目页和首页又很像,都是调用文章列表. ...
- PhotoSwipe中文API(一)
入门 您应知道之前先做起事情: 1. PhotoSwipe不是一个简单的jQuery插件,至少基本的JavaScript知识才能安装. 2. PhotoSwipe需要预定义的图像尺寸(更多关于这一点) ...
- 【工具】代码生成器-python脚本
我觉得造轮子这件事情,是谁都可以做的.只不过做得好或者不好而已,用心了做得就要优雅一点. 之前用过java的代码生成器,什么pojodobodbo都能生成,于是我也来自己造一个轮子. 造轮子的事情是没 ...
- Django中间件的5种自定义方法
阅读目录(Content) Django中间件 自定义中间件 中间件(类)中5种方法 中间件应用场景 回到顶部(go to top) Django中间件 在http请求 到达视图函数之前 和视图函 ...
- wordpress防止网站被镜像四个方法
第一种:拆分域名链接与镜像站比对,然后用img标签src空值触发onerror来执行js比对,比对失败则跳转回源站.代码如下:(复制粘贴到主题的functions.php最后一个?>之前,代码出 ...
- SpringData关键字查询练习
我们在上一节知道SpringData关键字有很多,我就拿几个例子练练手 1.需求我们查询lastName like sun and id < ?的查询 package com.fxr.sprin ...
- php之isset empty is_null的区别
isset:当前变量没有设置(即不存在),或者变量设置为null的时候,返回true,设置为“”或者0 都是返回的true empty:变量不存在,设置值为null,设置为“”,设置为0 都返回tru ...