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

顺晟科技

2022-09-23 11:08:23

131

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>watch监听属性变化实现类百度搜索栏功能</title>
    <script src="vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div >
    <input type="text" v-model="word"/>
    <h1>
        结果：{{result}}
    </h1>
</div>
<script>
    var app = new Vue({
        el: '#lantian',
        watch: {
            word: function (newV, oldV) {
                //console.log(newV+'=>'+oldV);//输出：新值和旧值
                //使用axios发送请求，需要安装node.js。在使用：npm install axios 安装axios
                axios.get('9.php?word=' + newV).then(function (response) {
                    console.log(response);
                    app.result=response.data;
                });
            }
        },
        data: {
            word: '',
            result: ''
        }
    });
</script>
</body>
</html>

　　9.php中的代码：

<?php
echo "你搜索的内容是：".$_GET['word'];

上一篇：vue组件化是什么,vue组件化-容下一篇：el-table checkbox,

网站建设

Js

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