快捷導(dǎo)航

Vue收集表單數(shù)據(jù)和過濾器總結(jié)

更新時間：2023年05月18日 11:08:34 作者：執(zhí)久呀

這篇文章主要介紹了Vue收集表單數(shù)據(jù)和過濾器的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

收集表單數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<div id="root">
    <h2>個人信息收集</h2>
    <form>
    姓名:<input type="text" placeholder="請輸入姓名" v-model.trim="zh"><br>
    密碼:<input type="password" placeholder="請輸入密碼" v-model="mm"><br>
     年齡:<input type="number" placeholder="輸入數(shù)字" v-model.number="age">
   性別: <label><input type="radio" name="sex" v-model="sex" value="男">男</label>
        <label><input type="radio" name="sex"  v-model="sex" value="女">女</label><br>
    愛好:<label><input type="checkbox" v-model="hobby" value="Java">Java</label>
        <label><input type="checkbox"v-model="hobby" value="SpringBoot">SpringBoot</label>
        <label><input type="checkbox"v-model="hobby" value="Vue">Vue</label><br>
        所屬地區(qū):
        <select v-model="whereFrom">
            </optgroup>
            <optgroup label="江西">
                <option value="江西南昌">南昌</option>
                <option value="江西贛州">贛州</option>
                <option value="江西九江">九江</option>
            </optgroup>
            <optgroup label="其他">
                <option value="其他地方">地方</option>
            </optgroup>
        </select><br>    <!--.lazy是等失去焦點(diǎn)才數(shù)據(jù)綁定 -->
        自我介紹:<br><textarea v-model.lazy="introduceMyself" placeholder="這個填寫框 右下角可以拉伸"></textarea><br>
    <label> <input type="checkbox" v-model="agree">閱讀并勾選</label>
        <a @click.prevent  rel="external nofollow" >《協(xié)議書》</a><br>
        <button @click.prevent="tijiao">提交</button>
    </form>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            zh:'',
            mm:'',
            age:'',
            sex:'男',
            hobby:['Java'],
            whereFrom:'江西贛州',
            introduceMyself:'',
            agree:''
        },
        methods: {
            tijiao(){
                console.log(JSON.stringify(this._data))
            }
        }
    });
</script>
<body>
</body>
</html>

收集表單數(shù)據(jù)總結(jié)

若：<input type='text'/>，v-model收集的是value值，用戶輸入就是value值。

若<input type=" radio"/>,因?yàn)関-model收集的為value值，所以要給這個標(biāo)簽配置value值，這樣勾選的收集到的就是這你配置的值

若：<input type=" checkbox"/>

1、沒有配置input的value屬性，那么收集的就是checked(勾選或未勾選，是一個布爾值)

2、配置input的value屬性：

v-model的初始值是非數(shù)組(一開始定義收集這個checkbox定義為字符串時)，那么收集的就是有沒有勾選的布爾值v-model的初始值是數(shù)組，那么收集的才是你定義的value值（勾選了才會收集）

備注：v-model的三個修飾符

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--vue-->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  <script src="Vue文件/dayjs.min.js"></script>
</head>
<div id="root">
格式化前：{{NowTime}}<br>
<!--    使用計算屬性器-->
    使用計算屬性器格式化后：{{relTime}}<br>
<!--    使用方法-->
    使用方法格式化后：{{MethodTime()}}<br>
<!--    使用過濾器-->
    使用過濾器格式化后：{{NowTime  | filterTime}}<br>
<!--濾器格式化后分割前四位-->
    使用過濾器格式化后分割：{{NowTime  | filterTime |mySlice}}<br>
</div>
<script type="text/javascript">
//配置全局過濾器
 Vue.filter('mySlice',function (value) {
     //分割前四位
     return  value.slice(0,4)//從第一位開始
 })
    const vm = new Vue({
        el: '#root',
        data: {
            NowTime:1669339250633,
        },
        methods: {
            MethodTime(){
                return dayjs(this.NowTime).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        computed:{
            relTime(){
                return dayjs(this.NowTime).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        filters:{
     filterTime(value){
         return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
     },
        //    分割字串前四位
        // mySlice(value){
        //  return  value.slice(0,4)//從第一位開始
        // }
 }
    });
    console.log(vm)
</script>
<body>
</body>
</html>

運(yùn)行結(jié)果：