vue学习4-CSDN博客

本文详细介绍了Vue.js中的数据响应式原理，包括Vue.set和vm.$set方法在给对象添加属性时的使用，以及Vue如何监测数据变化。在Vue中，对于对象后追加的属性和数组中的元素更新，需要使用特定的API来确保响应式更新。同时，文章还展示了如何使用v-model收集表单数据，并讲解了过滤器在数据格式化显示中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Set()

Vue.set(对象,属性名，属性值)/vm.$set(对象,属性名，属性值)方法可以给对象增加属性

其局限性是不能给vm 或 vm的根数据对象添加属性

Vue监视数据原理

vue会监视data中所有层次的数据。

监测对象中的数据

通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)

监测数组中的数据

通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1). 调用原生对应的方法对数组进行更新。
(2). 重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：
(1). 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2). Vue.set() 或 vm.$set()

收集表单数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
<body>
    <div id="demo">
        <form action="/xxx" @submit.prevent="handleSubmit">
            <span>用户名：</span>
            <!-- v-model.trim表示收集数据时去掉首尾空格 -->
            <input type="text" v-model.trim="info.username"><br>
            <span>密码</span>
            <input type="password" v-model="info.pwd"><br>
    
            <span>性别：</span>
            女<input type="radio" value="girl" v-model="info.sex">
            男<input type="radio" value="man" v-model="info.sex"><br>

            <span>年龄：</span>
            <!-- v-model.number表示将获取到的数据转化为数字 -->
            <input type="number" v-model.number='info.age'><br>

            <span>爱好：</span>
            篮球<input type="checkbox" value="basket" v-model="info.likes">
            足球<input type="checkbox" value="foot" v-model="info.likes">
            乒乓球<input type="checkbox" value="pingpang" v-model="info.likes"><br>
    
            <span>城市：</span>
            <select v-model="info.cityId">
                <option value="">未选择</option>
                <option value="Beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select><br>

            <span>介绍：</span>
            <!-- v-model.lazy表示当失去光标时才收集数据 -->
            <textarea rows="10" v-model.lazy="info.desc"></textarea><br>

            <button >提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el: "#demo",
            data: {
                info:{
                    username: '',
                    pwd: '',
                    sex: '女',
                    likes: ['foot'],
                    cityId: '',
                    allCitys: [{id:1, name:'BJ'}, {id:2, name:'SH'}, {id:3, name:'WH'}],
                    desc:'',
                    age:''
                },
            },
            methods: {
                handleSubmit(){
                    console.log(JSON.stringify(this.info));
                }
            }
        })
    </script>
</body>
</html>

如果是text类型的输入，则v-model收集的是value值，用户输入的就是value值。
如果是radio类型的输入，则v-model收集的是value值，且要给标签配置value值。

如果是checkbox类型的输入，如果没有配置input的value属性，那么收集的就是checked（是否勾选，是布尔值）。如果配置了input的value属性，如果v-model的初始值是非数组，那么收集的就是checked（是否勾选，是布尔值）。如果v-model的初始值是数组，那么收集的的就是value组成的数组

过滤器

对要显示的数据进行特定格式化之后再进行显示，注意，并没有改变原来的数据

<!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>Document</title>
    <script src="./js/vue.js"></script>
    <!-- 日期处理的第三方库 -->
    <script src="./js/dayjs.min.js"></script>
</head>
<body>
    <div class="root">
        <!-- 计算属性实现 -->
        <h4>现在是{{Ftime}}</h4>
        <!-- methods实现 -->
        <h4>现在是{{getFtime()}}</h4>
        <!-- 过滤器实现,用|表示,会将time作为第一个参数传入 -->
        <!-- 如果timeFormater后面加括号，里面有参数,那么仍会将time作为第一个参数传入，括号中的参数作为第二、第三...个参数 -->
        <!-- 多个过滤器可以串联 -->
        <h4>现在是{{time | timeFormater}}</h4>
    </div>
    <script>
        Vue.config.productionTip=false
        // 定义全局过滤器
        // 在Vue()中定义的过滤器是局部的，只能在那个vue对象中使用
        // 全局过滤器可以供所有vue对象使用
        // Vue.filter('timeFormater',function(value){
        //     return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
        // })
        new Vue({
            el:'.root',
            data:{
                time:Date.now(),
            },
            computed:{
                Ftime(){
                    // 格式化
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                getFtime(){
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            // 过滤器用filters表示
            // 过滤器的本质是函数
            filters:{
                timeFormater(value){
                    return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
                }
            }
        })
    </script>
    
</body>
</html>