使用vue实现div类似input的placeholder和v-model，用于选择跳出窗口的选项

<template>
  <!-- 定义样式，自定义一个placeholder属性模仿input的placeholder，使用vue-bind可以让变量实现类似v-model的实时显示 -->
  <div class="typeClass" align="left" :placeholder="dataName.mes" @click.prevent="typeChoose"></div>
</template>

<script>
export default {
  data() {
    return {
      dataName: {
        mes: "请输入你选择的商品",
      },
    };
  },
  methods: {
    typeChoose: function () {
      this.dataName.mes = "忘崽牛奶";
    },
  },
};
</script>
<style>
.typeClass {
  display: block;
  width: 100%;
  margin-top: 15px;
  line-height: 42px;
  padding-left: 1rem;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border: 1px solid #f5f5f5;
  border-radius: 24px;
  background: url(./../imgs/arrow.png) no-repeat center right;
  background-size: 10px;
  color: #666666;
}
.typeClass:empty::before {
    content: attr(placeholder);
    vertical-align: middle;
    color: #666666;
}
</style>

 

效果：

如有问题，评论区见~