【Vue】Vue2.0+Vue3.0学习笔记day05

最新推荐文章于 2024-11-04 15:22:25 发布

西西歪歪西歪

最新推荐文章于 2024-11-04 15:22:25 发布

阅读量464

点赞数

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

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122321628

版权

本文是Vue学习笔记的第五天，主要涵盖了Vue中的表单数据收集、过滤器、v-text、v-html、v-cloak、v-once、v-pre等指令的使用，以及如何创建自定义指令的函数式和对象式用法，并做了总结。

摘要由CSDN通过智能技术生成

038.收集表单数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    
    <!-- 引入Vue -->
    <script 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属性：
                1 v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                2 v-model的初始值是数组，那么收集的就是value组成的数组
           备注：v-model的三个修饰符：
              lazy：失去焦点再收集数据
              number：输入字符串转为有效的数字
              trim：输入首尾空格过滤                        
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 表单  表单提交默认跳转页面，prevent阻止跳转 -->
        <form @submit.prevent="demo">
            <!-- 点击"账号:"输入框获取焦点
            <label for="demo">账号：</label>
            <input type="text" id="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>
            性别：
            <!-- 单选框 name控制只能选中一个-->
            男<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="Sing dance">
            rep<input type="checkbox" v-model="userInfo.hobby" value="rep">
            篮球<input type="checkbox" v-model="userInfo.hobby" value="basketball"><br><br>
            所属校区
            <!-- 下拉框 -->
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <option value="shenzhen">深圳</option>
            </select><br><br>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="https://blog.csdn.net/weixin_58214412?spm=1008.2028.3001.5343">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                userInfo:{
                    account:'',
                    password:'',
                    age:"",
                    sex:'female',
                    hobby:[],
                    city:'',
                    other:'',
                    agree:''
                }
            },
            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo));
                }
            },
        })
    </script>
</body>

</html>