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 ...
随机推荐
- HTTPS握手
作用 内容加密 建立一个信息安全通道,来保证数据传输的安全: 身份认证 确认网站的真实性 数据完整性 防止内容被第三方冒充或者篡改 https的采用了对称加密和非对称加密.握手过程中采用非对称加密,得 ...
- ubuntu配置tomcat和jdk
1.安装tomcat此处以tomcat8为例. 先到tomcat官网:http://tomcat.apache.org下载相应的tar.gz的安装包 放到ubuntu系统的指定位置(自己指定)解压. ...
- cordic算法的verilog实现及modelsim仿真
1. 算法介绍 CORDIC(Coordinate Rotation Digital Computer)算法即坐标旋转数字计算方法,是J.D.Volder1于1959年首次提出,主要用于三角函数.双曲 ...
- 大数据，why python
大数据,why python ps, 2015-12-4 20:47:46 python" title="大数据,why python">http://www.op ...
- Python numpy有什么用？
NumPy is the fundamental package for scientific computing with Python.就是科学计算包. a powerful N-dimensio ...
- Conductor
https://netflix.github.io/conductor/ High Level Architecture
- Underscore-逐行分析
标签: // Underscore.js 1.8.3// http://underscorejs.org// (c) 2009-2015 Jeremy Ashkenas, DocumentCloud ...
- tslib移植中环境变量编辑
(1)将/usr/local/tslib下的所有文件复制到移植系统文件中/usr/local(2)编辑移植系统中/etc/profile添加触摸屏支持内容:在/etc/profile文件中设置tsli ...
- JS的 instanceof 方法
http://www.cnblogs.com/jasonxuli/p/6769282.html 这是 2014-12-10 发在 iteye 上的文章 今天突然想起js的原型继承模型和相关的proto ...
- 2017-2018-1 JaWorld 团队作业--冲刺7
2017-2018-1 JaWorld 团队作业--冲刺7 冲刺博客 冲刺1 冲刺2 冲刺3 冲刺4 冲刺5 项目完成情况 存在的问题 存在的问题是敌机只设置了一种,没能实现多种敌机的游戏设置. 界面 ...