<!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-读取/发送数据的更多相关文章

  1. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  2. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  3. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  4. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  5. Vue.js连接后台数据jsp页面 ￣▽￣

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  7. vue.js 三（数据交互）isomorphic-fetch

    至于fetch的介绍,在这里就不多说了,官方和网络上的说明不少 之前使用jquery的Ajax朋友,可以尝试一下使用一下这个新的api 推荐使用isomorphic-fetch,兼容Node.js和浏 ...

  8. js读取json数据

    { "code": 0, "msg": null, "data": { "pageNum": 1, "page ...

  9. 实现js读取Excel数据

    如何通过js去读取excel中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. kubernetes实战(三)：k8s v1.11.1 持久化EFK安装

    1.镜像下载 所有节点下载镜像 docker pull kibana: docker tag kibana: docker.elastic.co/kibana/kibana: docker pull ...

  2. DIY自己的GIS程序（1）——起航

    一个GIS系统最重要的功能是绘制图形和关联属性,这里研究二维点线面的绘制过程: 对于一个绘图系统设计,图形的绘制涉及两个重要的方面. 1.一个是绘制或者重新绘制,重绘过程出现在下面情况: a 界面初始 ...

  3. java 多线程 day18 ThreadPoolExecutor

    http://blog.csdn.net/lipc_/article/details/52025993 https://www.cnblogs.com/trust-freedom/p/6681948. ...

  4. rtcp多媒体控制协议应用

    rtcp package send/recv demo main.c #include <stdio.h> #include <rtp.h> #include <rtcp ...

  5. PAT 1112 Stucked Keyboard[比较]

    1112 Stucked Keyboard(20 分) On a broken keyboard, some of the keys are always stucked. So when you t ...

  6. 【Lua】模块与包

    定义:         从用户观点来看,一个模块就是一个程序库,可以通过require来加载(require用于使用模块,module用于创建模块),然后便得到了一个全局变量,表示一个table,这个 ...

  7. cocos进阶教程(5)CC_CALLBACK_X系列的使用技巧

    CC_CALLBACK_1,CC_CALLBACK_2,CC_CALLBACK_3 这些都是std::bind的宏,数字1,2,3主要表示要占位的数量,也是将来传递参数的数量. // new call ...

  8. SQL :模糊查询，转义字符

    1. 查询table表name列包含 '_BCE' 的记录 select * from table where name like '_BCE%' ABCEDF _BCEFG _BCEDF 3 row ...

  9. javascript 快速排序方法

    "快速排序"的思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元 ...

  10. 居于mtk芯片安卓车机系统具体流程

    一:车机系统框架  MCU 功能  电源控制  Radio 控制(RDS)  按键检测(Panel/Remote/SW)  常见信号检查(倒车/大灯/刹车)  CAN 模块通讯  ARM- ...