笔记琐碎

最新推荐文章于 2025-03-24 22:32:35 发布

原创最新推荐文章于 2025-03-24 22:32:35 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue.js中的axios数据获取、过滤器filters、计算属性computed、侦听器watch及动态绑定样式与style的应用技巧。

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

axios：

可以用来获取json数据，有get / set两种方式：通过then()，then有两个参数，分别都是两个函数,函数的this都指向window

axios.get("./json/carts.json").then((res)=>{
        this.products = res.data;
        // console.log(res);
    },(err)=>{console.log(err)})
}

过滤器filters：

执行回调函数，可以用来过滤数据，有两个参数input(管道符前面的数据）和param1（用来传参），

{{product.productPrice*product.productCount | toFixed(2)}}

filters:{  //过滤器
    toFixed(input,param1){
        return '$'+input.toFixed(param1)
    }
},

input中当type="number"时，可以给num设置最小值：min=1，或者最大值：max=1

v-model.number表示只能输入数字，输入字符串无效

<input type="number" v-model.number="product.productCount" min="1">

computed：计算属性，一般情况下都会连着v-model

<input type="text" v-model="a">
{{msg}}

msg(){
    if(this.a.length>10){
        return "太多了"
    }
    if(this.a.length<2||this.a.length>0){
        return "太少了"
    }
}

watch：和computed用法基本一致，但是watch支持异步。

a(newVal,oldVal){
    setTimeout(()=>{
        if(newVal.length>6){
            return this.msg="多了"
        }
        if(newVal.length<2){
            return this.msg= "少了"
        }
        this.msg = '';
    },200)
}

动态绑定样式：可以利用对象和数组两种方式

<style>
        .a{background-color: red;}
        .b{font-size: 30px}
        .c{color:blueviolet}
    </style>
</head>
<body>
<div id="app">
    <p class="a" :class="{b:true,c:true}">我很帅</p>
    <p :class="[class1,class2,class3]">今天很冷</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            class1:"a",
            class2:"b",
            class3:"c"
        }
    })
</script>

动态绑定style：
<p :style="{fontSize:'50px',color:'blue'}">天天开心</p>  //属性名用驼峰命名法

<p :style="[class4,class5]">天天开心哈哈哈</p>
<script>
    new Vue({
        el:"#app",
        data:{
            class4:{fontSize:'50px'},
            class5:{color:'blue'}
        }
    })