随笔练习1

最新推荐文章于 2024-10-15 15:24:52 发布

小飞弟

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量105

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/affasda/article/details/140537105

版权

<template>
  <div>
    <el-select v-model="selectedValues" multiple placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div>选中的值: {{ selectedValuesString }}</div>
  </div>
</template>

<script>


export default {

  data() {
    return {
      flag: {
        value: "xxxx,333"
      },
      selectedValues: [], // 初始为空数组
      selectedValuesString: '111,222', // 初始为空字符串
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }]
    };
  },

  watch: {
    selectedValuesString(newVal) {
      // 将字符串转换为数组，并去除空字符串
      this.selectedValues = newVal.split(',').map(item => item.trim()).filter(Boolean);
     
    },
    selectedValues(newVal) {
      // 将数组转换为字符串
      this.selectedValuesString = newVal.join(',');
      this.flag.value = this.selectedValuesString;
      console.log(this.flag.value);
    }
  },
  created() {
    this.selectedValuesString = this.flag.value;
    // 初始时将字符串转换为数组
    this.selectedValues = this.selectedValuesString.split(',').map(item => item.trim()).filter(Boolean);
  }
};
</script>