HeaderSearch.vue的写法

最新推荐文章于 2024-08-20 00:36:53 发布

hamimelon2020

最新推荐文章于 2024-08-20 00:36:53 发布

阅读量189

点赞数

分类专栏： JavaScript vue 文章标签： Vue v-model 路由跳转搜索框前端开发

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120780293

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

自己写的错误的

<template>
    <div class="headercart">
        <input type="text"></input>
        <button @click="search">搜索</button>

    </div>
</template>

<script>
export default {
    name: "HeaderSearch"
}


</script>

又改了一遍

<template>
    <div class="headerSearch">
        <input type="search" v-model.trim="key.word">
        <button @click="search">搜索</button>
    </div>
</template>

<script>
export default {
    name: 'HeaderSearch',
    data() {
        return {
            keyword: ''
        }
    }
},
    methods: {
        search() {
            if(this.keyword != this.$route.query.wd)
                this.$route.push({path: '/search', quary: {wd: this.keyword}})
        }
    },
}

</script>

还是不对啊

<template>
    <div class="headerSearch">
        <input type="search" v-model.trim="key.word">
        <button @click="search">搜索</button>
    </div>
</template>

<script>
export default {
    name: 'HeaderSearch',
    data() {
        return {
            keyword: ''
        }
    },

    methods: {
        search() {
            if(this.keyword != this.$route.query.wd)
                this.$route.push({path: '/search', quary: {wd: this.keyword}})
        }
    }
}

</script>
<style scoped>
.headerSearch {
    display: inline-block; 
    position: relative;
}
.headerSearch input {
    width: 400px;
    height: 30px;
}

.headerSearch button{
    position: absolute;
    right: 0px;
    top: 0;
    width: 60px;
    height: 30px;
    margin: 0;
    border: none;
    color: white;
    background-color: red;
    cursor: pointer;
}
</style>

又改了一遍，看对不对？

<template>
    <div class="headerSearch">
        <input type="search" v-model.trim="keyword">
        <button @click="search">搜索</button>
    </div>
</template>

<script>
export default {
    name: 'HeaderSearch',
    data() {
        return {
            keyword: ''
        }
    },

    methods: {
        search() {
            if(this.keyword != this.$route.query.wd)
                this.$route.push({path: '/search', query: {wd: this.keyword}})
        }
    }
}

</script>