09.1html里

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

    <script type="text/javascript" src="../vue/node_modules/axios/dist/axios.js"></script>

    <script type="text/javascript" src="../vue/node_modules/lodash/lodash.js"></script>

</head>

<body>

<div id="vue">

    <!--当input里的值改变时,会改变data里的word-->

    <input type="text" v-model="word">

    <h1>

        <!--拿到data里的result里的值-->

    </h1>

    <table border="1">

        <tr>

            <th>序号</th>

            <th>编号</th>

            <th>标题</th>

            <th>价格</th>

            <th>数量</th>

            <th>合计</th>

        </tr>

        <tbody>

        <!--拿到data里的result里的值-->

        <tr v-for="(v,k) in result">

            <td>{{k}}</td>

            <td>{{v.id}}</td>

            <td>{{v.title}}</td>

            <td>{{v.price}}</td> <!--每次都取name值,不变-->

            <td>{{v.num}}</td> <!--每次都取name值,不变-->

            <td>{{v.num*v.price}}</td> <!--每次都取name值,不变-->

        </tr>

        总价格:{{total}}

        </tbody>

    </table>

</div>

</body>

<script type="text/javascript">

    var app=new Vue({

        el:'#vue',

        watch:{ //监听data里的word的变化

            //			拿到input里的新值和旧值

            word:_.debounce(

                    function(new_v,old_v){

                        //		        console.log(new_v+'=>'+old_v);

                        var url = '9.1.php?word='+new_v;

                        //				ajax get异步请求

                        axios.get(url).then(function(response){

                            console.log(response);

                            console.log(response.data.total);

                            app.total = response.data.total //赋值给data里的result

                            app.result = response.data.content //赋值给data里的result

                        });

                    },1000 //1秒后执行

            )

        },

        data:{

            word:'',

            result:'',

            total:0,

        }

    });

</script>

</html>

09.1.php里

<?php

//print_r('要搜索的内容是:'.$_GET['word']);

$data = [

           'total'=>0,

            'content'=>array(

                ['id' => 1, 'title' => 'iphone7Plus', 'price' => 300, 'num' => 3,],

                ['id' => 2, 'title' => 'hdcms系统', 'price' => 1999, 'num' => 9],

            ),

];

$total=0;

foreach($data['content'] as $k=>$v){

    $total+=$v['price']*$v['num']; //计算总价

}

$data['total']=$total;

echo json_encode($data);

?>

效果:

09.1.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回数组的更多相关文章

  1. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  2. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  4. Android学习——动态注册监听网络变化

    新建一个BroadcastTest项目,然后修改MainActivity中的代码,如下: public class MainActivity extends AppCompatActivity { p ...

  5. angularJs之$watch监听属性变化访问后台

  6. 监听EditText变化---TextWatcher 类用法详解

    http://www.cnblogs.com/yjing0508/p/5316985.html TextWatcher textWatcher = new TextWatcher() { @Overr ...

  7. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  8. vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

随机推荐

  1. Asp.NetCore WebApi 引入Swagger

    一.创建一个Asp.NetCore WebApi 项目 二.引入NuGet包 SwashBuckle.AspNetCore 三.在项目属性配置中设置 四.修改项目的启动文件Startup.cs 1). ...

  2. Spring Cloud下使用Feign Form实现微服务之间的文件上传

    背景 ​ Spring Cloud现在已经被越来越多的公司采用了,微服务架构比传统意义上的单服务架构从复杂度上多了很多,出现了很多复杂的场景.比如,我们的产品是个app,支持第三方登录功能,在手机端调 ...

  3. RxJava 1升级到RxJava 2过程中踩过的一些“坑”

    RxJava2介绍 RxJava2 发布已经有一段时间了,是对 RxJava 的一次重大的升级,由于我的一个库cv4j使用了 RxJava2 来尝鲜,但是 RxJava2 跟 RxJava1 是不能同 ...

  4. 【extjs6学习笔记】1.16 初始: 关于主题

    打开app.json,里面有主题设置 主题说明 theme-base 这个包是所有其他主题的基础主题,是唯一没有父主题的主题. 它包含Ext JS组件和布局正常工作绝对必需的最低限度的一组CSS规则. ...

  5. 【MFC】MFCMenuButton 的用法

    背景:因为对话框界面上的空间有限,为了节省空间,我决定采用一个MFCMenuButton用来实现同一类按钮事件.本来我打算设置两个按钮:“单个删除文件”和“清空所有文件”两个按钮,但是空间太小,而且这 ...

  6. SQL优化 · 经典案例 · 索引篇

    Introduction 在这些年的工作之中,由于SQL问题导致的数据库故障层出不穷,下面将过去六年工作中遇到的SQL问题总结归类,还原问题原貌,给出分析问题思路和解决问题的方法,帮助用户在使用数据库 ...

  7. C# asp.net mvc 注解验证

    看代码,看注解,看懂了单词,没看懂意思. 今日只能专攻一下这项特性. 1.Remote 在看这个例子的时候 ,看了JsonResult 以及 JsonRequestBehavior.AllowGet解 ...

  8. pta编程题19 Saving James Bond 2

    其它pta数据结构编程题请参见:pta 题目 和简单版本不同的是,简单版本只需判断能否到达岸边,而这个版本要求求出最少跳数的路径. 简单版本用dfs实现,而这道题用BFS实现. 注意: 岛半径为7.5 ...

  9. Hybris ECP里Customer对应的数据库表

    SAP CRM里Account明细页面: SAP C4C里Account明细页面: 在Hybris storefront注册一个帐号: 注册成功之后能在backoffice里看到成功生成的custom ...

  10. UVA 11990 ``Dynamic'' Inversion (序列分治)

    26天以前做过的一道题,之前的做法是分治预处理,树套树在线修改,复杂度为O(nlogn+m*logn*logn),代码量较大. 本来想学习一下cdq分治的,看到论文上的凸包.斜率就暂时放一边了,只知道 ...