vue中关于select标签和option标签的value

最新推荐文章于 2024-05-17 11:40:43 发布

困在雨天

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量1.2k

点赞数

分类专栏： vue html&css 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44106237/article/details/126942332

版权

vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html&css

2 篇文章 0 订阅

订阅专栏

1.在<option>中缺省value属性，则提交数据时提交的是选定的文本。

切记易错点： 1，option中不要写value

2，switch的判断条件是this.operation。不需要写为this.operation.text

  <div id='app'>
    <select name="" id="" v-model:value="operation">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
  </div>

 var vm = new Vue({
    el: '#app',
    data: {
      operation: ''
    },
    methods: {
      calculate() {
        switch (this.operation) {
          case '+':
            console.log(this.operation);
            break;
          case '-':
            console.log(this.operation);
            break;
          case '*':
            console.log(this.operation);
            break;
          case '/':
            console.log(this.operation);
            break;
          default:
            break;
        }
      }
    }
  })

2.可以在<option>中设定value属性，如此再向服务器提交的时候直接提交设定的value。

  <div id='app'>
    <select name="" id="" v-model:value="operation">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
  </div>

 var vm = new Vue({
    el: '#app',
    data: {
      operation: ''
    },
    methods: {
      calculate() {
        switch (this.operation) {
          case '+':
            console.log(this.operation);
            break;
          case '-':
            console.log(this.operation);
            break;
          case '*':
            console.log(this.operation);
            break;
          case '/':
            console.log(this.operation);
            break;
          default:
            break;
        }
      }
    }
  })