Vue学习笔记3

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>

数组作为value的时候会把value用英文逗号拼接起来