Vue入门笔记(三)

最新推荐文章于 2024-06-16 12:11:30 发布

yzy||

最新推荐文章于 2024-06-16 12:11:30 发布

阅读量224

点赞数

分类专栏： javascript 文章标签： javascript css3 vue.js html5

本文链接：https://blog.csdn.net/yzy258/article/details/106588720

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

Vue入门笔记(三)

Vue入门笔记(三)

计算属性

使用范围
在遇到复杂的逻辑时使用计算属性。

<body>
    <div id="app">{{reversedText}}</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            text: '123,456'
        },
        computed: {
            reversedText: function () {
                return this.text.split(',').reverse().join(',');
            }
        }
    })
</script>

计算属性用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

<body>
    <div id="app">{{sum}}</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            shop: [{
                    name: "小猪",
                    price: 500,
                    count: 5
                },
                {
                    name: "小狗",
                    price: 500,
                    count: 5
                },
                {
                    name: "小猫",
                    price: 500,
                    count: 5
                }
            ]
        },
        computed: {
            sum: function () {
                var s = 0;
                for (var i = 0; i < this.shop.length; i++) {
                    s += this.shop[i].price*this.shop[i].count;
                }
                return s;
            }
        }
    });
</script>

当 shop 中的商品有任何变化，比如购买数量变化或增删商品时，计算属性 price 就会自动更新

计算属性可以依赖其他计算属性;计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。

<body>
    <div id="app1"></div>
    <div id="app2">
        {{ reversedText }}
    </div>
</body>
<script>
    var appl = new Vue({
        el: '#app1',
        data: {
            text: '123,456'
        }
    });
    var app2 = new Vue({
        el: '#app2 ',
        computed: {
            reversedText: function () {
                return appl.text.split(",").reverse().join(",");
            }
        }
    });
</script>

这里我们创建了两个 Vue 实例 appl 和 app2，在 app2 的计算属性reversedText 中，依赖的是 appl 的数据 text，所以当 text 变化时，实例 app2 的计算属性也会变化。

计算属性缓存
计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以 text 只要不改变，计算属性也就不更新。
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
详细解释参考

v-bind 及 class

绑定 class
如下代码所示如果isActive==false则添加类不成功,为true是添加active类成功

<body>
    <div id="app">
        <div :class="{'active':isActive}"></div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isActive: true
        }
    })
</script>

上面示例中，类名 active 依赖于数据 isActive，当其为 true 时， div 会拥有类名 Active，为 false 时则没有。
对象中也可以传入多个属性，来动态切换 class。另外，：class 可以与普通 class 共存。
<div :class="{'active':isActive,'error':isError}" class="yzy"></div>
如果isActive,isError同时为true则
<div class="active error yzy"></div>

class绑定的数组语法

<body>
    <div id="app">
        <div :class="[isActive,isError]"></div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isActive: 'active',
            isError:'error'
        }
    })
</script>

渲染后的结果为<div class="active error"></div>
在数组中还可以使用三元表达式

<body>
	<div :class="[isActive?activeC:'',errorC]"></div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isActive: true,
            actiuveC:'active',
            ErrorC:'error'
        }
    })
</script>

class 有多个条件时，可以在数组语法中使用对象语法与对象语法一样，也可以使用 data、 computed 和 methods 三种方法。

b-bind绑定内联样式

方法与：class 类似，也有对象语法和数组语法，看起来很像直接在元素上写 CSS

<body>
    <div id="app">
        <div :style="{'color':color,'font-size':fontsize+'px'}">文本</div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            color: "red",
            fontsize: "50"
        }
    })
</script>

css 属性名称使用驼峰命名（cameCase）或短横分隔命名（kebab-case)
大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里。

<body>
    <div id="app">
        <div :style="stylee">文本</div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            stylee:{
            	color:"red",
            	fontSize:10+'px'//这里用短横分隔命名可能会出错
            }
        }
    })
</script>

yzy||

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门笔记(三)

文章目录Vue入门笔记(三)计算属性v-bind 及 classb-bind绑定内联样式Vue入门笔记(三)计算属性使用范围在遇到复杂的逻辑时使用计算属性。<body> <div id="app">{{reversedText}}</div></body><script> var app = new Vue({ el: "#app", data: { text
复制链接

扫一扫