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 ...
随机推荐
- 【apt install】Unable to locate package python3-pip
解决办法: 先 sudo apt update 然后再 sudo apt install python3-pip,完成. 如果还不行的话参考这个:
- Redis缓冲区设置
对于Redis服务器的输出(也就是命令的返回值)来说,其大小通常是不可控制的.有可能一个简单的命令,能够产生体积庞大的返回数据.另外也有可能因为执行了太多命令,导致产生返回数据的速率超过了往客户端发送 ...
- kubernetes实战(十)：k8s使用Helm安装harbor
1.基本概念 对于复杂的应用中间件,需要设置镜像运行的需求.环境变量,并且需要定制存储.网络等设置,最后设计和编写Deployment.Configmap.Service及Ingress等相关yaml ...
- Elasticsearch入门教程
ElasticSearch是一个高度可扩展的开源搜索引擎并使用REST API,所以您值得拥有. 在本教程中,将介绍开始使用ElasticSearch的一些主要概念. 下载并运行ElasticSear ...
- xml转为array
PHP实现微信支付,微信支付宝返回的xml结果如下: <xml> <appid><![CDATA[wx2421b1c4370ec43b]]></appid ...
- idea中使用插件lombok简化java bean的getter/setter/log等常用功能
一.安装. 1. 2. 3. 4. . 二.使用 1. 2. 3. 结果分析,如果没有添加@Setter注解,则LombokTest中的student示例无法使用setAge()等方法.使用lombo ...
- 正在尝试解析依赖项“MvvmLightLibs (≥ 5.2.0.0)”。 “MvvmLightLibs”已拥有为“CommonServiceLocator”定义的依赖项
正在尝试解析依赖项"MvvmLightLibs (≥ 5.2.0.0)". "MvvmLightLibs"已拥有为"CommonServiceLoca ...
- TED #01#
Laura Vanderkam: How to gain control of your free time 1.我们总是不缺乏时间去做重要的事情,即便我们再忙; “我没时间” 的同义词是“我不想做” ...
- oracle数据库中的异常处理
create or replace procedure prc_get_sex (stuname student.name%type) as stusex student.sex%type; begi ...
- qq空间相册下载
qq空间相册下载 描述 目前功能只可以下载 单个相册 程序基本是3个独立分开的部分. 解析(某一用户)所有相册 解析(单个)相册所有图片地址并写文件 根据文件下载图片 目的 只要有权限可以访问到的相册 ...