Vue核心收集表单数据过滤器

最新推荐文章于 2024-07-17 17:57:11 发布

怀梦

最新推荐文章于 2024-07-17 17:57:11 发布

阅读量460

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_44230693/article/details/130537191

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.14. 收集表单数据

收集表单数据:

若: ，则v-model收集的是value值，用户输入的就是value值。
若: ，则v-model收集的是value值，且要给标签配置value值。
若:
- 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
- 配置input的value属性:
  - v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
  - v-model的初始值是数组，那么收集的的就是value组成的数组
v-model的三个修饰符:
- lazy: 失去焦点再收集数据
- number: 输入字符串转为有效的数字
- trim: 输入首尾空格过滤

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>收集表单数据</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        收集表单数据:
            若: <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
            若: <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
            若: <input type="checkbox"/>
                1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
                2.配置input的value属性:
                    (1).v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
                    (2).v-model的初始值是数组，那么收集的的就是value组成的数组
           备注: v-model的三个修饰符:
                lazy: 失去焦点再收集数据
                number: 输入字符串转为有效的数字
                trim: 输入首尾空格过滤
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
            密码：<input type="password" v-model="userInfo.password"> <br /><br />
            年龄：<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 />
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br /><br />
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">成都</option>
            </select>
            <br/><br/>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受
            <a href="https://www.yuque.com/cessstudy">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false
		
		new Vue({ 
			el: '#root',  	  
			data:{
                userInfo: { 
                    account: '', 
                    password: '', 
                    age: 18, 
                    sex: 'female', 
                    hobby: [], 
                    city: 'beijing',
                    other: '', 
                    agree: '' 
                }
			},
            methods: { 
			    demo() { 
			        console.log(JSON.stringify(this.userInfo)) 
			    } 
			}
		});
    </script>
</body>
</html>

在这里插入图片描述

1.15. 过滤器（Vue3 已经移除）

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

注册过滤器：

Vue.filter(name, callback) 全局过滤器
**new Vue {filters: {}} **局部过滤器

使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

过滤器可以接收额外参数，多个过滤器也可以串联
并没有改变原本的数据，而是产生新的对应的数据

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
    <!--
        过滤器:
            定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
            语法: 
                1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:}
                2.使用过滤器: {( xxx | 过滤器名}} 或 v-bind:属性 = “xxx过滤器名"
            备注:
                1.过滤器也可以接收额外参数、多个过滤器也可以串联
                2.并没有改变原本的数据，是产生新的对应的数据
    -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>时间</h2>
        <h3>当前时间戳：{{time}}</h3>
        
        <!-- 计算属性实现 -->
        <h3>现在是: {{fmtTime}}</h3>
        
        <!-- methods实现 -->
        <h3>现在是: {{getFmtTime()}}</h3>
        
        <!-- 过滤器实现 -->
        <h3>转换后时间：{{time | timeFormater()}}</h3>
        <!-- 过滤器实现(传参) -->
        <h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
        
        <h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
        
        <h3 :x="msg | mySlice">liqb</h3>
    </div>
    
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false

        // 全局过滤器 
        Vue.filter('mySlice',function(value){
            return value.slice(0,11);
        })
        
		new Vue({ 
			el: '#root',  	  
			data:{
                time:1626750147900,
                msg: 'li qi bin love fan wen yu'
			},
            computed:{
                fmtTime(){
                    return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
                }
            },
            methods:{
			  getFmtTime(){
                  return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
              }  
            },
            // 局部过滤器
            filters:{ 
			    timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){ 
			        return dayjs(value).format(str);
			    },
                // mySlice(value) {
			    //     return value.slice(0,11);
                // }
			}
		});

        new Vue({
            el: '#root2',
            data: {
                msg: "li qi bin love fan wen yu"
            }
        });
    </script>
</body>
</html>