vue?select組件綁定的值為數(shù)字類型遇到的問題

更新時(shí)間：2022年09月05日 08:48:06 作者：小劉加油！

這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類型遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

select組件綁定的值為數(shù)字類型問題

在日常開發(fā)中，我們雙向綁定的form表單，經(jīng)常會(huì)遇到對(duì)數(shù)字類型的綁定，但對(duì)于v-model 綁定的值，輸入數(shù)字會(huì)自動(dòng)轉(zhuǎn)成字符串類型。

對(duì)于input輸入框綁定的值，想要修改為數(shù)字類型很簡單，只需要使用表單的修飾符就可以。如下所示

number 可以將綁定的 v-model 改為 number 類型

<input v-model.number="age" type="number">

但對(duì)于 select 選擇框或者 radio 單選框來說，則沒有那么友好了。

select option 綁定的 value 是數(shù)字，但是 v-model 為 string ，這就會(huì)導(dǎo)致正常的數(shù)據(jù)無法渲染。解決方法如下所示：

使用 :value

<a-form-item label="登錄方式" name="type">
? ? ? ? ? ? ? ? ? ? <a-radio-group v-model:value="type">
? ? ? ? ? ? ? ? ? ? ? ? <a-radio :value="1">密碼登錄</a-radio>
? ? ? ? ? ? ? ? ? ? ? ? <a-radio :value="2">驗(yàn)證碼登錄</a-radio>
? ? ? ? ? ? ? ? ? ? </a-radio-group>
</a-form-item>

這樣就可以正常渲染！

vue中的綁定值

學(xué)習(xí)重點(diǎn)

主要介紹一下vue中MVVM的特點(diǎn)。

也就是研究一下這個(gè)特點(diǎn)：改變數(shù)據(jù)的值，頁面會(huì)跟著改變，頁面上的值發(fā)生變化，數(shù)據(jù)也會(huì)聯(lián)動(dòng)。

我們要學(xué)的就是：

Html標(biāo)簽與數(shù)據(jù)的綁定；
Html標(biāo)簽與屬性(CSS樣式等)的綁定，；
Html標(biāo)簽與事件(點(diǎn)擊事件等)的綁定;

攔截器，給各種綁定設(shè)置一個(gè)攔截功能(數(shù)據(jù)需要滿足什么情況，才需要綁定？)。

值綁定

使用占位符{{fieldName}}，數(shù)據(jù)會(huì)總動(dòng)填充到頁面上。

使用v-model可以與輸入控件(input/select)進(jìn)行綁定，輸入框內(nèi)的值發(fā)生變化，數(shù)據(jù)也會(huì)發(fā)生變化。

(v-model的設(shè)計(jì)就屬于MVVM模式)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測試實(shí)例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--數(shù)據(jù)綁定-->
    <p>{{ message1 }} </p>
    <!--類似InnerHTML-->
    <div v-html="message2"></div>
    <!--雙向綁定，輸入框與展示的數(shù)據(jù)進(jìn)行聯(lián)動(dòng)，v-model的值影響data中的值，data中的值再影響<p>標(biāo)簽的值-->
    <input v-model="message1">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message1: 'runoob!',
            message2: '<h>123456</h>',
        }
    })
</script>
</body>
</html>

屬性綁定

屬性綁定指的是控件自身的屬性，例如<a>標(biāo)簽的href屬性，使用v-bind進(jìn)行屬性綁定，簡寫 “:bind”、或者只保留一個(gè) “:”。

后面會(huì)發(fā)現(xiàn)，其實(shí)自定義組件的值，也是通過這種方式進(jìn)行綁定的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測試實(shí)例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--綁定id屬性-->
    <div v-bind:id="rawId"></div>
    <!--綁定href屬性-->
    <a v-bind:href="url" rel="external nofollow" >{{name}}</a>
    <!--綁定CSS樣式-->
    <div :style="mystyle">{{name}}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            mystyle:'background: #444;color: #eee',
            name: 'baidu',
            url: 'www.baidu.com',
            rawId: 'div_id',
        }
    })
</script>
</body>
</html>

事件綁定

事件和屬性的區(qū)別，就是事件是一個(gè)Function，而屬性是一個(gè)Object。

語法上有所差別，vue需要在methods中定義事件函數(shù)，

使用v-on:click綁定點(diǎn)擊事件，簡寫@click。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Vue 測試實(shí)例</title>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--點(diǎn)擊事件，v-on表示 監(jiān)聽事件-->
    <button v-on:click="dialog('msg')">Click</button>
    <!--點(diǎn)擊事件，v-on表示 監(jiān)聽事件-->
    <button @click="dialog()">Click</button>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'runoob!'
        },
        methods: {
            dialog: function (msg) {
                if (!msg) {
                    alert(this.message);
                } else {
                    alert(msg);
                }
            }
        }
    })
</script>
</body>
</html>

攔截器(filters)

數(shù)據(jù)綁定之前，對(duì)數(shù)據(jù)計(jì)算或者校驗(yàn)，比如說：數(shù)值是百分比，顯示之前，你需要給它增加一個(gè)百分號(hào)。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Vue 測試實(shí)例</title>
    <style>
        .class1 {
            background: #444;
            color: #eee;
        }
    </style>
    <script src="res/vue.js"></script>
</head>
<body>
<div id="app">
    <!--一般的屬性綁定不需要攔截器，需要?jiǎng)討B(tài)改變樣式可以使用雙向綁定實(shí)現(xiàn)-->
    <div :class="{'class1': isShow}">Text</div>
    <div :class="{'class1': true}">Text</div>
    <!--在值綁定中，可以對(duì)輸入輸出進(jìn)一步處理-->
    <input :value="message2 | formatStr"/>
    <span> {{message2 | formatStr}}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message1: 'msg1',
            message2: 'msg',
            isShow: false
        },
        filters: {
            formatStr: function (value) {
                return value + "%"
            }
        }
    })
</script>
<script>
</script>
</body>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: