vue：计算属性和监听器、过滤器

落日映苍穹つ 2022-12-12 15:02 137阅读 0赞

### 文章目录 ###

*  计算属性和侦听器
 *  过滤器

# 计算属性和侦听器 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div id = "app">
            
            <ul>
                <li>西游记：价格：{
       {xyjPrice}},数量：<input type="number" v-model="xyjNum"></li>
                <li>水浒传：价格：{
       {shzPrice}},数量：<input type="number" v-model="shzNum"></li>
                <li>总价：{
       {totalPrice}}</li>
                {
       {msg}}
            </ul>
        </div>
        <scrIpt src="../node_modules/vue/dist/vue.js"></scrIpt>
        <script>
            let vm = new Vue({
                el:"#app",
                data:{
                    xyjPrice: 99.9,
                    shzPrice: 88.9,
                    xyjNum:1,
                    shzNum:1,
                    limitNum:3,
                    msg:""
                },
                computed: {
                   totalPrice() {
                        return this.xyjPrice*this.xyjNum+this.shzPrice*this.shzNum;
                   } 
                },
                watch: {
                    xyjNum(newVal,oldVal) {
                        if(newVal >= this.limitNum) {
                            this.msg = "西游记超出库存数量";
                            this.xyjNum = 3
                        } else {
                            this.msg = ""
                        }
                    },
                    //也可以用这种声明方法shzNum:function(newVal,oldVal) ，一般用第一种shzNum(newVal,oldVal),
                    shzNum:function(newVal,oldVal) {
                        if (newVal >= this.limitNum) {
                            this.msg = "水浒传超出库存数量";
                            this.shzNum = 3
                        } else {
                            this.msg = ""
                        }
                    }
                },
            })
        </script>
    </body>
    </html>

# 过滤器 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div id = "app">
            <ul>
                
                <li v-for="user in userList">
                    {
       {user.id}} ===> {
       {user.gender == 1?"男":"女"}} ==》 {
       {user.gender | genderFilter}}
                </li>
                <br>
                
                <li v-for = "user in userList">
                    {
       {user.gender | gFilter}}
                </li>
            </ul>
        </div>
    
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script>
    
            // 可以定义全局过滤器代替局部过滤器
            Vue.filter("gFilter",function(val){
                if (val == 1) {
                    return "男~~~"
                } else {
                    return "女~~~"
                }
            })
    
            let vm = new Vue({
                el:"#app",
                data:{
                    userList:[
                        {id:1,name:"小杨",gender:1},
                        {id:2,name:"小红",gender:0}
                    ]
                },
                filters:{
                    //filters 定义局部过滤器，只可以在当前vue实例中使用
                    genderFilter(val) {
                        if (val == 1) {
                            return "男";
                        } else {
                            return "女";
                        }
                    }
                }
            })
        </script>
    </body>
    </html>