vue2 动态绑定 placeholder

最新推荐文章于 2024-04-26 16:47:03 发布

Andie_1204

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量859

点赞数 1

分类专栏： vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/m0_37109343/article/details/125626673

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>
    <div class="searchbox">
        <div class="mod_select">
            <div class="select_box" >
                <span class="select_txt1" @click="isShow =! isShow">
                    {{ mod_select[curSearchKey] }}
                    <span class="select-icon"></span>
                </span>

                <ul class="option">
                    <li v-for="(value,key) in mod_select" :key="key"
                        :class="{ 'activeClass' : key === curSearchKey }"
                        v-show="isShow"
                        @click="setCurSearchKey(key); isShow =! isShow" >
                        {{ value }}
                    </li>
                </ul>
            </div>
        </div>

<!-- 搜索功能压根没搞 -->
        <form action="">
            <input type="text" name="" id="search1" class="import" autocomplete="OFF" 
            :placeholder="changePlaceholder" >
            <input type="button" value="搜   索" class="btn-search" onclick="">
            <div id="word1"></div>
        </form>

    </div>
    
</template>


<script>
export default {
    data() {
        return{
            mod_select: {
                illness: '疾病',
                medicine: '药物',
                symptomzhenl: '症状', 
                diagnosis: '诊疗', 
            },
            isShow: false,
            curSearchKey: '',
            searchText: '',  
        }
    },
    methods: {
        setCurSearchKey (key) {
            let value = key
            //判断value值是否为未定义
            //如果有就让value为screen中的第一个(默认)
            if (!value || !this.mod_select[value]) {
                value = Object.keys(this.mod_select)[0]
            }
            this.curSearchKey = value
            // this.isShow =! this.isShow
        },
    },

    // 初始化
    mounted: function() {
        this.setCurSearchKey();
        this.isShow = false
    },

    computed: {
        changePlaceholder() {
            if (this.curSearchKey == 'illness'){
                return '请输入疾病名称'
            }
            else if (this.curSearchKey == 'medicine'){
                return '请输入药物名称'
            }
            else if (this.curSearchKey == 'symptomzhenl'){
                return '请输入症状名称'
            }
            else if (this.curSearchKey == 'diagnosis'){
                return '请输入诊疗名称'
            }
        }
	},
}

</script>