<!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. 持续交付的Mesos与Docker导入篇

    变革这个词在当今的数字化时代司空见惯,IT技术每过一段时间就会有一起革新,从WEB2.0.虚拟化.云计算.大数据.微架构.DevOps再到今天的容器Docker与Mesos. Docker的出现方便了 ...

  2. [WorldWind学习]23.TerrainAccessor

    QuadTile的CreateElevatedMesh()方法中: //获取地形瓦片 TerrainTile tile = QuadTileSet.World.TerrainAccessor.GetE ...

  3. Docker 随笔

    设置镜像时区 RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime RUN echo 'Asia/Shanghai' >/etc ...

  4. 2.1 The Object Model -- Classes and Instances（类和实例）

    一.Defining Classes(定义类) 1. 定义一个新的Ember类,调用Ember.Object上的extend()方法: example:定义了一个含有say()方法的新的Person类 ...

  5. Java之Integer源码

    1.为什么Java中1000==1000为false而100==100为true? 这是一个挺有意思的讨论话题. 如果你运行下面的代码 Integer a = 1000, b = 1000; Syst ...

  6. shoes的安装前后（一）

    最近看到一个模型用到了shoes,准备自己试一试.搞了半天,也安装不成功.直接安装包,gem install shoes,失败, 从rubygems上下载最新版本的shoes 然后安装,成功了.随便写 ...

  7. Action<>和Func<> 区别

    其实他们两个都是委托[代理]的简写形式. 一.[action<>]指定那些只有输入参数,没有返回值的委托 Delegate的代码: public delegate void myDeleg ...

  8. hdu5106 数位dp

    这题说的是给了一个二进制数R , 计算出 在[0,R) 区间内的数, 二进制中有n个1 个和 n<=1000; R<2^1000, 这样 用dp[len][lee] 表示在第len位的时候 ...

  9. ts 绘制多边形

    let bg = this.createBitmapByName("123_png"); this.addChild(bg) bg.x = this.stage.width / 2 ...

  10. SQL: coalesce()函数

    ①用途: 将空值替换成其他值 返回第一个非空值 ②表达式: COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达 ...