【vue】Axios实现搜索

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./axios.min.js"></script>
</head>

<body>
    <div id="app">
        <select v-model="data.type">
            <option value="0">请选择</option>
            <option value="1">ID</option>
            <option value="2">标题</option>
        </select>
        <input type="text" v-model="data.content" placeholder="请输入搜索内容">
        <button @click="getData">搜索</button>

        <ul>
            <li v-for="(item,index) in data.dataList" :key="index">{{item}}</li>
        </ul>
    </div>

    <script type="module">
        import { createApp, reactive, ref, watch, computed } from './vue.esm-browser.js'
        createApp({
            setup() {
                const data = reactive({
                    type: "0",   //搜索类型
                    content: '',//搜索内容
                    dataList: []
                })
                //获取数据
                const getData = () => {
                    console.log('搜索类型', data.type, '搜索内容', data.content)
                    if (data.type == "1") {
                        let id = data.content
                        data.dataList = []
                        //get请求
                        axios.get(`http://127.0.0.1/api/getData/id/${id}`).then(res => {
                            console.log("获取数据:", res.data)
                            if (res.data.status == "succcess") {
                                data.dataList.push(res.data.data)
                            }
                        }).catch(err => {
                            console.log("错误", err)
                        })
                    } else if (data.type == "2") {
                        let param = {
                            title: data.content
                        }
                        //post请求
                        axios.post('http://127.0.0.1/api/postJson/research', param).then(res => {
                            console.log("获取数据:", res.data)
                            if (res.data.status == "succcess") {
                                data.dataList.push(res.data.data)
                            }
                        }).catch(err => {
                            console.log("错误", err)
                        })
                    }

                }
                return {
                    data,
                    getData
                }
            }
        }).mount("#app")
    </script>
</body>

</html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关推荐
wordbaby15 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹19 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel27 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh41 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的1 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw51 小时前
移动端调试上篇
前端
伍哥的传说1 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入