vue中selected預設選擇空白解決方案)

一. 普通寫法

  <select >
    <option>a</option>
    <option>b</option>
    <option selected>c</option>
  </select>

• 備註:直接在option中新增selected屬性

二.vue中的寫法(預設選擇空白解決方案) 

 

<div id="app">
        <h1>計算器</h1>
        <input type="text" v-model='a'>
        <select name="" id="" v-model='couponSelected'>
            <option :value="option.id" v-for='option in opt'>{{ option.name }}</option>
        </select>
        <input type="text" v-model='b' @keyup.enter='jg'>
        <input type="button" value="結果" @click='jg'>
        <span>{{ res }}</span>

</div>
 <script>
        var vm = new Vue({
            el: '#app',
            data: {
                a: '',
                b: '',
                res: '',
                selected: '',
                opt: [
                    {id:1,name:'加'},
                    {id:2,name:'減'},
                    {id:3,name:'乘'},
                    {id:4,name:'除'},
                    ]
            },
            created() {
                //如果沒有這句程式碼，select中初始化會是空白的，預設選中就無法實現
                this.selected = this.opt[0].id;

            },
            methods: {
                jg: function () {

                    if (this.selected == 1) {
                        this.res = parseFloat(this.a) + parseFloat(this.b)
                    } else if (this.selected == 2) {
                        this.res = parseFloat(this.a) - parseFloat(this.b)
                    } else if (this.selected == 3) {
                        this.res = parseFloat(this.a) * parseFloat(this.b)
                    } else if (this.selected == 4) {
                        this.res = parseFloat(this.a) / parseFloat(this.b)
                    }
                }
            }
        })
</script>