computed计算属性用法介绍

最新推荐文章于 2024-04-06 07:19:38 发布

ૢ花开এ十一࿐

最新推荐文章于 2024-04-06 07:19:38 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_68450731/article/details/130115792

版权

1.什么是(computed)计算属性，computed属性，是一个计算属性，该属性的方法名相当于date属性里面的key，他可以作为key值使用，该属性里面的方法必须要有return返回值，这个返回值就是(value)值。

2.语法：

<script>
    new Vue({
        el:'#app', 挂载点
        data:{
            
        },
        computed:{  计算属性
            return  //返回值
        },
})
</script>

3.使用场景：

a.字母大写：字母输入至input输入框p标签接收转换为大写字母

<!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="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <p>{{string}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                val:'',
            },
            computed:{
                string() {
                    return this.val.toUpperCase()
                }
            }
        })
    </script>
</body>
</html>

b.字符串反转 123456反转为654321

<!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="../vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="val">
        <p>{{rever}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                val:''
            },
            computed:{
                rever(){
                    return this.val.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

ૢ花开এ十一࿐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
computed计算属性用法介绍

1.什么是(computed)计算属性，computed属性，是一个计算属性，该属性的方法名相当于date属性里面的key，他可以作为key值使用，该属性里面的方法必须要有return返回值，这个返回值就是(value)值。a.字母大写：字母输入至input输入框p标签接收转换为大写字母。b.字符串反转 123456反转为654321。
复制链接

扫一扫