Vue之v-bind

在Vue中，v-bind用于绑定html内容，可以简写为 ： 格式为 v-bind：属性名=”…”
如<a v-bind:href=”...”></a> = <a :href=”...”></a>
其中典型的属性是class和style，

如<a v-bind：href="https://www.baidu.com">click here</a>

--->将会渲染成:

<a href="https://www.baidu.com">click here</a>

v-bind:class="{类名/css样式名：w}"
若w为真，则添加前面的类；若为假，则不添加

<style>
	.s{
		fontFamily:"宋体",
        color:'red',
        backgroundColor:'green'
       }
</style>

<p :class="{'s':isActive}">Hello World</p>
<script>
new Vue({
	el:"#demo",
	data:{
		isActive:true
		}
	});
</script>

v-bind：style="…"示例：

<h1 v-bind:style="cs">此处是显示特定的样式</h1>
<script>
    var cs={
        fontFamily:"宋体",
        color:'red',
        backgroundColor:'green'
    };
    cs.toString=function(){
        var str='';
        for(var i in this){
            str+=i+":"+this[i]+";";
        }
        return str;
    }
    var vm=new Vue({
        el:"#app",
        data:{
            cs:cs
        }
    });
</script>    

--->将被渲染成：

<h1 v-bind:style="fontFamily:'宋体'; color:'red';backgroundColor:'green' ">此处是显示特定的样式</h1>

使用函数的情况：

<div id="app">
    <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: "#app",
    data: {
        getTitle: function () {
            return "title content";
        }
    }
});