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 ...
随机推荐
- 第1章 1.8计算机网络概述--OSI参考模型和网络排错
OSI参考模型的网络排错: 每一层都为上一层提供服务. 如果网络出故障了,应该从底层向高层一层一层的查. OSI参考模型排错指导:(排错原则:自下而上.终极大招ping命令) 1.物理层故障: ①查看 ...
- docker——libnetwork插件网络功能
从1.7.0版本开始,Docker正是把网络和存储这两部分的功能都以插件化形式剥离出来,允许用户通过指令来选择不同的后端实现.剥离出来的独立容器网络项目叫libnetwork,从名字就能看出,它希望将 ...
- Bootstrap单按钮的下拉菜单
简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...
- 系统管理命令之id
当我们想知道某个用户的UID和GID时id命令是非常有用的.一些程序可能需要UID/GID来运行.id使我们更加容易地找出用户的UID以GID而不必在/etc/group文件中搜寻. 1.获取指定用户 ...
- 基于SSH RSA的信任关系
RSA 非对称加密算法 client ---> server 私钥 公钥 1. 客户端生成密钥对 ssh-keygen -t rsa 执行后产生的密钥对会分别追加写到当前用户家目录下的以下文 ...
- Nginx负载均衡之健康检查
负载均衡实例 http{ upstream myserver { server 10.10.10.1 weight=3 max_fails=3 fail_timeout=20s; server 10. ...
- LINQ 学习路程 -- 查询操作 GroupBy ToLookUp
Grouping Operators Description GroupBy GroupBy操作返回根据一些键值进行分组,每组代表IGrouping<TKey,TElement>对象 To ...
- Codeforces Round #417 (Div. 2) D. Sagheer and Kindergarten（树中判祖先）
http://codeforces.com/contest/812/problem/D 题意: 现在有n个孩子,m个玩具,每次输入x y,表示x孩子想要y玩具,如果y玩具没人玩,那么x就可以去玩,如果 ...
- TimerPickerDialog 中 onTimeSet 执行两次的问题
开发android小闹钟的程序时,在添加闹钟时闹钟列表中总是出现两个相同的闹钟. btnAddAlarm.setOnClickListener(new View.OnClickListener() { ...
- codeforces 356 div2 C.Bear and Prime 100 数学
C. Bear and Prime 100 time limit per test 1 second memory limit per test 256 megabytes input standar ...