Vue项目中，使用H5新增datalist标签

最新推荐文章于 2023-10-25 20:50:03 发布

小辰哥哥

最新推荐文章于 2023-10-25 20:50:03 发布

阅读量778

点赞数 1

分类专栏： Vue2.0 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43630831/article/details/126141066

版权

Vue2.0 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

*Vue项目中，使用H5新增datalist标签*
总结

Vue项目中，使用H5新增datalist标签

1.template模块

<input class="inputClass" type="text" list="inputClassList" placeholder="请选择" v-model="inputTempValue" @change="processing(inputTempValue)"/>
<datalist id="inputClassList" style="position: relative">
  <option v-for="item in options" :value="item.label"></option>
</datalist>
<el-button type="primary" style="margin-left: 15px" @click="getValue">搜索</el-button>

2.script模块

export default {
  name: "vue_project",
  data() {
    return {
      inputValue: "",
      inputTempValue: '',
      options: [
        {
          value: "0",
          label: "黄金糕",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
        {
          value: "3",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
      ]
    }
  },
  methods: {
    processing(val) {
      var n = 0;
      // 关于label与value属性
      this.options.forEach((item) => {
        if (item.label == val) {
          this.inputValue = item.value;
        }
        if (item.label != val) {
          n++;
        }
        if (n == this.options.length) {
          this.inputValue = this.inputTempValue;
        }
      })
    },
    getValue() {
      this.$message({type: 'success', message: this.inputValue})
    }
  }
}

3.style模块

/* 输入框与选择框结合样式信息 */
.inputClass {
  padding: 0 0.078125rem;
  border-radius: 0.020833rem;
  height: 0.208333rem;
  border: 0.005208rem solid #DCDFE6;
  font-size: 16px;
  width: 200px;
}

/* WebKit browsers，webkit内核浏览器 */
::-webkit-input-placeholder {
  color: #C6C9D1;
  font-size: 16px;
}