首页 > 其他分享 >Vue-选择器v-model绑定对象

Vue-选择器v-model绑定对象

时间:2023-09-14 22:46:25浏览次数:35  
标签:选项 Vue 绑定 value label model 选择器

Vue-选择器v-model绑定对象

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

选中option后回显,即v-model与data()中变量value绑定对应,可理解为选中option中的value获取得到后 对应赋值于v-mode所绑定的位于data()的value,再根据value回显对应标签名称

标签:选项,Vue,绑定,value,label,model,选择器
From: https://www.cnblogs.com/chuimber/p/17703727.html

相关文章

  • Vue--this的指代问题及用法
    Vue--this的指代问题及用法this在普通函数(function(){})里,指代调用该函数(方法)的对象this在箭头函数(()=>{})里,指代定义该箭头函数的外层对象在axios调用当前vue实例的data:axios回调函数(.then())是在执行栈中被执行,其中this指向window,若要在axios中取后端数据并......
  • vue2.0 表单验证明明有值却提示错误
    明明有值却总是提示为空我的解决方法时将number转为字符串验证方法如图:(验证只可以输入数字)赋值时转为字符串: ......
  • 一个基于Vue模型的表单生成器
    哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!VuetifyFormBase是一个基于模型的表单生成器,目的是提供一个工具,以便以较少的努力从任何模型数据生成可编辑的表单,即使模型是一个深度嵌套的对象。VuetifyFormBase作为Vue组件工作,可以很容易地集成到任何VU......
  • Vue介绍
    前端的发展史1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看2Ajax的出现->后台发送异步请求,Render+Ajax混合3单用Ajax(加载数据,DOM渲染页面......
  • QSqlTableModel.insertRecord()报错"No Fields to update"解决记录 && QField构造
    问题的出现当我想向一个Table中插入一条记录时,我本能的想的是:QSqlTableModel是由一条一条的Record组成的,那么我先创建一个Record,并且赋予对应的值,然后再使用QSqlTableModel::insertRecord()插入就好了,代码如下:QSqlRecordrcd;rcd.remove(model->fieldIndex("id"));rcd.setValu......
  • 解决vue3中抽离出来的js如何调用页面的方法
    有时我们会用render渲染表格的columns,里面的按钮如何去调用.vue文件的方法?思路;在.vue文件中我们通过参数的方式传给.js文件,然后用变量接收,点击时执行(注意:.vue文件中setup执行比较早,按钮是点击事件,不会主动执行函数。为防止函数未声名就当做参数传递,必须在最后执行getFn函数,和d......
  • vue 初识
    一、前端的发展史1、前端的发展演变#1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看#2Ajax的出现->后台发送异步请求,Render+Ajax混合......
  • modelsim使用
    手动使用写好测试文件挺好理解的放代码看一下就懂了:文件名字为原本代码文件加上_tb`timescale1ns/1ns //精度1nsmodulehuiyidemo_tb;regsclk=0 ;regrst_n=0 ;wire[2:0]test_out;//这个是不需要写的initialbegin #100 //100ns rst_n<=1'b1;endalw......
  • vue3 elementplus 列表中添加排序功能,移动的时候修改背景色
    <el-tablesize="medium":border="true":data="branchTableData":row-style="changeColor":stripe=falsestyle="width:100%;">......
  • Vue学习四:组件的三大组成部分、组件通信和进阶语法
    一、组件的三大组成部分<template>里面只能有一个根元素<style>全局样式(默认):影响所有组件局部样式:scoped下样式,只作用于当前组件<script>el根实例独有,data是一个函数,其他配置项一致二、scoped设置局部样式默认情况:写在组件中的样式会全局生效→因此很容易造成多......