<!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. 设置UCHome注册登陆退出的跳转页自定义

    UCHome 默认注册.登录成功后跳转到 http://www.xxx.com/home/space.php?do=home 退出后会跳转到站点的首页,即 http://www.xxx.com/hom ...

  2. 【Python】自动化测试框架-共通方法汇总

    1.滚动滚动条(有的时候页面元素element取得对但是并没有回显正确的数据,可能是因为页面第一次加载很慢,所以页面可能做了滚动到哪里就加载到哪里的效果,此刻我们就需要用到滚动条自动滚动这段代码让页面 ...

  3. Ambari Rest api 使用

    最近由于项目的需要在看一些Ambari的api去获取集群的一些信息,获取集群节点的状态信息以及各个服务和组件的信息.然后在我们的数据服务管理平台上去做一些监控运维,现在把一些使用总结一下:官网rest ...

  4. （转）帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  5. 史上最全的MonkeyRunner自动化测试从入门到精通（2）

    原文地址https://blog.csdn.net/liu_jing_hui/article/details/60955696 最基本脚本功能开始编写 (1)Monkeyrunner和Monkey的区 ...

  6. ZW团队:IN_OUT传播模型简介

    传统媒体,网络媒体的整合推广,我曾经提出过一个:Tn-Out模式 In-Out是NBA的篮球术语,你自己百度下 传统媒体承担"IN"的角色,负责传播的深度和建立公信力 网络媒体充当 ...

  7. Transactions and beyond it..

    While data integrity is managed very effectively within a single database with row locking, deadlock ...

  8. HTTP--TCP连接

    几乎所有的 HTTP 通信都是由 TCP/IP 承载的,TCP/IP 是全球计算机及网络 设备都在使用的一种常用的分组交换网络分层协议集.客户端应用程序可以打开一 条 TCP/IP 连接,连接到可能运 ...

  9. JavaScript中常用的事件

    .onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区 ...

  10. AVAudioFoundation(4)：音视频录制

    本文转自:AVAudioFoundation(4):音视频录制 | www.samirchen.com 本文主要内容来自 AVFoundation Programming Guide. 采集设备的音视 ...