Vue之v-model

最新推荐文章于 2024-05-16 23:40:36 发布

DFXVHG

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量1k

点赞数

文章标签： vue.js elementui linq

本文链接：https://blog.csdn.net/DFXVHG/article/details/124759545

版权

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

v-model可以绑定的页面标签：input、textarea、select和自定义组件【components】

body>
    <div id="app">
        <input type="text" v-model="val">
        <button @click="getData">获取数据</button>
        <h1 v-text="val2"></h1>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            val:"数据",
            val2:""
        },
        methods:{
            getData(){
                this.val2 = this.val;
            }
        }
    })
</script>

计算属性

计算属性实际是一个函数，写在computed里面

一般当你的函数中的内容比较复杂时，我们会在computed进行封装函数，函数种类【业务逻辑、运算、事件绑定】

<script>
    new Vue({
        el:"#app",
        data:{
            array:[
                {
                    name:"面包",
                    price:"10",
                    num:"1",
                },{
                    name:"面包",
                    price:"20",
                    num:"1",
                },{
                    name:"面包",
                    price:"30",
                    num:"1",
                },{
                    name:"面包",
                    price:"40",
                    num:"1",
                }
            ]
        },
        computed:{
            get(){
                /*
                    语法：
                        array.reduce(callback,起始位置);
                    参数一：callback【回调函数】
                    参数二：起始位置
                    s:如果reduce的起始位置指定为0，那么s保存的就是0，
                    当获取第二个数据的时候，s当前保存的是第一次数据的总和
                    o:当前数据
                */
                return this.array.reduce((s,o)=>{

                    return s + o.price * o.num;
                },0)
                // return this.array.reduce(function (previousValue, currentValue, currentIndex, array) {
                //
                //     return previousValue + array.price * array.num;
                // },0)
            }
        }
    })
</script>

过滤器

过滤器和计算属性类似，计算属性用于运算，过滤器用于转换

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>

<div id="app">

    <h1>{{message | handleToLowerCase('数据') | handleOther}}</h1>

</div>


<script>

    new Vue({
        el:"#app",
        data:{
            message:"HELLO"
        },
        filters:{
            handleToLowerCase(value,data){
                console.log(value,data)

                return value.toLowerCase();
            },
            handleOther(value){
                console.log(">>>>"+value)
                return value + "我是第二个过滤器";
            }
        }
    });

</script>

</body>
</html>

```

DFXVHG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-model

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。v-model可以绑定的页面标签：input、textarea、select和自定义组件【components】body> <div id="app"> <input type="text" v-model="val"> <button @click="getData">
复制链接

扫一扫