计算属性

计算属性

　　插值的普通函数，只要页面一刷新，函数就会重写计算，跟函数没关的值的变化，函数也会重写计算

　　把函数当成属性来用---》只有这个函数使用的属性(变量)变化，函数才重写运算

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="mytest2">-->{{mytest2}}
    <br>
    <input type="text" v-model="mytext">--->{{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}
    <br>
    函数方式：{{getName()}}
    <br>
    计算属性:{{getName2}}

</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mytext: '',
            mytest2: '',
        },
        methods:{
            getName(){
                console.log("我执行了")
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        },
        // 8生命周期
        computed:{
            getName2(){
                console.log("计算属性我执行了")
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)

            }
        }


    })
</script>
</html>

通过计算属性，重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <p><input type="text" v-model="myText"  placeholder="请输入要筛选的内容:"></p>
    <ul>
        <li v-for="data in newList">{{data}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },

        computed:{
            newList(){
                console.log('我执行了')
                 var datalist2 = this.dataList.filter(item => {
                    return item.indexOf(this.myText) > -1
                })
                return datalist2

            }
        }
    })
</script>
</html>

 通过计算属性实现名字首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--大段的代码写在这里不好，使用计算属性-->
    {{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}
    <p>计算属性：{{getname}}</p>
    <!--普通方法要加括号-->
    <p>普通方法：{{getNameMethod()}}</p>
    <!--区别是在同一个页面中使用多次计算属性，不会多次执行-->
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            mytext:'lqz',
        },
        computed:{
            getname(){//依赖的状态改变了，会重新计算
                console.log('计算属性')
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        },
        methods:{
            getNameMethod(){
                console.log('普通方法')
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        }
    })
</script>
</html>

 

posted @ 2022-04-14 14:36  那就凑个整吧  阅读(44)  评论(0)  编辑  收藏  举报