Vue使用v-model收集各種表單數(shù)據(jù)、過濾器的示例詳解

更新時(shí)間：2024年08月29日 11:36:24 作者：Bulut0907

這篇文章主要介紹了Vue使用v-model收集各種表單數(shù)據(jù)、過濾器的示例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1. 使用v-model收集各種表單數(shù)據(jù)

若<input type=“text”/>，則v-model收集的是value值，用戶輸入的就是value值
若<input type=“radio”/>，則v-model收集的是value值，所以要給標(biāo)簽配置value值
若：<input type=“checkbox”/>
- 沒有配置input的value屬性，那么收集的就是checked(是布爾值)，勾選一個(gè)所有的都會(huì)被勾選
- 配置input的value屬性:
v-model的初始值是非數(shù)組，那么收集的就是checked(是布爾值)
v-model的初始值是數(shù)組，那么收集的的就是value組成的數(shù)組

v-model的三個(gè)修飾符：

lazy：失去焦點(diǎn)再收集數(shù)據(jù)
number：輸入字符串轉(zhuǎn)為有效的數(shù)字
trim：去除輸入的首尾空格

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- prevent: 點(diǎn)擊submit不進(jìn)行跳轉(zhuǎn) -->
    <form @submit.prevent="printInfo">
        賬號：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
        密碼：<input type="password" v-model="userInfo.password"> <br/><br/>
        <!-- type="number": 現(xiàn)在文本框只能輸入數(shù)字，但vm保存的還是字符串 -->
        年齡：<input type="number" v-model.number="userInfo.age"> <br/><br/>
        性別：
        男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
        愛好：
        學(xué)習(xí)<input type="checkbox" v-model="userInfo.hobby" value="study">
        吃飯<input type="checkbox" v-model="userInfo.hobby" value="eat">
        <br/><br/>
        所屬校區(qū)
        <select v-model="userInfo.city">
            <option value="">請選擇校區(qū)</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
        </select>
        <br/><br/>
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
        <input type="checkbox" v-model="userInfo.agree">閱讀并接受<a  rel="external nofollow" >《用戶協(xié)議》</a>
        <button>提交</button>
    </form>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:18,
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods: {
            printInfo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
    })
</script>
</html>

頁面顯示如下：

vm顯示的data如下：

2. 日期格式化

在bootcn搜索dayjs，可以看到這個(gè)日期格式化的js文件
選擇復(fù)制鏈接，打開https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js
右鍵另存為進(jìn)行保存

使用：

dayjs(1690497853551).format('YYYY年MM月DD日 HH:mm:ss')

不傳時(shí)間戳，默認(rèn)就是當(dāng)前時(shí)間

3. 過濾器

不是必須要用的，用計(jì)算屬性、method方法也可以實(shí)現(xiàn)

場景：對要顯示的數(shù)據(jù)進(jìn)行特定格式化后再顯示(適用于一些簡單邏輯的處理)
注冊過濾器：全局過濾器Vue.filter(name, callback)或局部過濾器new Vue{filters:{}}
使用過濾器: {{xxx | 過濾器名}} 或 v-bind:屬性 = "xxx | 過濾器名"
注意：
- 過濾器可以自動(dòng)接收管道符前的值，也可以接收額外參數(shù)、多個(gè)過濾器也可以串聯(lián)
- 并沒有改變原本的數(shù)據(jù), 是產(chǎn)生新的對應(yīng)的數(shù)據(jù)

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
    <script type="text/javaScript" src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
    <h2>現(xiàn)在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h2>
</div>
<div id="root2">
    <h2 :x="msg | mySlice">hello</h2>
</div>
<script type="text/javascript">
    // 全局過濾器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })
    new Vue({
        el:'#root',
        data:{
            time:1690497853551
        },
        // 局部過濾器
        filters:{
            timeFormater(value,format='YYYY年MM月DD日 HH:mm:ss'){
                return dayjs(value).format(format)
            }
        }
    })
    new Vue({
        el:'#root2',
        data:{
            msg:'hello'
        }
    })
</script>
</body>
</html>

頁面顯示效果：