Vue的使用3

计算属性

个人感觉计算属性是为了减少模板代码中表达式的复杂度也就是减少在表达式中出现对于属性过于复杂的运算，提高可读性。

<body>
<div id="app">
    <h2>{{firstName + ' ' + lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            firstName: 'firstName',
            lastName: 'lastName'
        },
        //  computed:计算属性（）
        computed:{
          fullName: function () {
              return this.firstName + ' ' + this.lastName
          }
        },
        methods: {
            getFullName() {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>
</body>

高级说法：计算属性在处理一些复杂逻辑时是很有用的。声明了一个计算属性 fullName 。提供的函数将用作属性 app. fullName 的 getter 。app. fullName 依赖于 app.firstName和app.lastName，在 app.firstName或者app.lastName 发生改变时，app. fullName 也会更新。
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

v-if、v-else-if和v-else条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message: '你好',
            score: 88
        }
    })
</script>
</body>
</html>

用法简单，这里就不多加阐述了。

v-show

通过给v-show赋值true或false来决定是否显示元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-if="isShow" id="aaa">{{message}}</h2>
    <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message: '你好',
            isShow: true
        }
    })
</script>
</body>
</html>

v-if和v-show的区别
v-if:当条件为false时，包含v-if的元素，根本不会存在dom中
v-show：当条件为false时，v-show只是给我们的元素添加了一个行内样式：display:none

以上为个人见解，如有错误的地方，麻烦提醒下，万分感谢。

posted @ 2021-01-25 15:25  lamsacule  阅读(41)  评论(0)    收藏  举报