<!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. Scala数组和集合

    一.scala数组 数组定义1: var arr = new Array[String](3) String:存储的元素类型 3:存储3个元素 添加元素: arr(1) = "hello&q ...

  2. 使用JAVA实现语音朗读一段文本

    需要做的工作: 1.下载  jacob-1.17-M2 或 jacob-1.18 2.解压jacob-1.17-M2 或 jacob-1.18 3.向工程里导入jacob.jar 4.将 jacob- ...

  3. 异常来自 HRESULT:0x80070057 (E_INVALIDARG)

    莫名其妙的编译总会报错 异常来自 HRESULT:0x80070057 (E_INVALIDARG) 未能加载程序集....... 几次删除引用然后重新引用程序集还是报错 奔溃中.... 网上搜索还真 ...

  4. Amber安装并行

    现在简单介绍一下amber12中安装openmpi并行的过程. 1. 下载openmpi版本在1.5-1.9之间的(openmpi-1.6.5.tar.bz2) 这是因为$AMBERHOME/Ambe ...

  5. CNN学习笔记：批标准化

    CNN学习笔记:批标准化 Batch Normalization Batch Normalization, 批标准化, 是将分散的数据统一的一种做法, 也是优化神经网络的一种方法. 在神经网络的训练过 ...

  6. hdu 5103 状态压缩dp

    这题说的是给了n(14)个点,每个点都以他 为根的最大可容的孩子个数和最小的可溶孩子个数L[i] ,R[i] 问这n个点形成一棵树有多少种形态 我们让 dp[i][S] 表示 一 i为根节点 的 拥有 ...

  7. c++编译时打印宏定义

    #pragma message("this is message") #pragma message只能打印字符串,如果想打印任何宏定义可使用: #define PRINT_MAC ...

  8. MAC nginx代理设置

    问题: 10.154.156.83:10081私服不存在了.但是不能改.用nginx代理至maven.xx.cn 增加换回地址: sudo ifconfig lo0 add 10.154.156.83 ...

  9. 20162314 《Program Design & Data Structures》Learning Summary Of The Eighth Week

    20162314 2017-2018-1 <Program Design & Data Structures>Learning Summary Of The Eighth Week ...

  10. SQL 中 not in 查询不到数据问题

    在开发的过程中,遇到过not in 始终查询不到数据问题 select * from T_CustomerInfo where CustomerID not in (select CustomerID ...