Vue学习笔记3

最新推荐文章于 2024-11-02 12:42:04 发布

Zinger Young

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量159

点赞数 1

分类专栏： Vue学习笔记文章标签： vue javascript css html html5

本文链接：https://blog.csdn.net/weixin_45145722/article/details/108818671

版权

Vue学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

v-bind的值不仅可以是字符串，还可以是对象或者数组

下面是值为对象的例子

只要在标签的属性上运用了v-bind命令，那么属性的值就可以用js表达式了，这样js表达式就不止用于模板语法中

<div id="app4">
	<div :class="{active: isActive, positive: isPositive(), comp: isComputed}">
            
    </div>
        
    <script>
        var app4 = new Vue({
            el: "#app4",
            data: {
                isActive: true,
            },

            computed: {
                isComputed: function() {
                    return this.isActive && this.isPositive()
                }
            },

            methods: {
                isPositive: function() {
                    return true
                }
            }
        })
    </script>
</div>

在这里插入图片描述

active直接来自data中的property，positive是methods中的方法，com来自computed属性中的值与data中的数据的methods中的方法有关

将active对应的isActive改为false

在这里插入图片描述

结果

在这里插入图片描述

下面是值为数组的例子

会把数组的值全部渲染到v-bind所绑定的属性中

<div id="app5">
    <div :id="[data1, data2]">
    
    </div>

	<script>
        var app5 = new Vue({
            el: "#app5",
            data: {
                data1: "d1",
                date2: "d2",
            }
        })
    </script>
</div>