查看“Vue:v-bind指令”的源代码

对于html标签的text、value等属性，Vue里面提供了v-text、v-model去绑定。但是对于除此之外的其他属性呢，这就要用到接下来要讲的v-bind指令了。博主的理解是v-bind的作用是绑定除了text、value之外的其他html标签属性，常见的比如class、style、自定义标签的自定义属性等。它的语法如下：

 <nowiki>v-bind:property="expression"</nowiki>

先来看几个简单的例子。

在下面的代码中 “backred:IsBack”，如果IsBack值为True ，则为span 绑定backred类,否则的话 不绑定backred类.

 <nowiki>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">      
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>    
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
		<script src="vue.js" type="text/javascript" charset="utf-8">

		</script>
        <style type="text/css">
            .class1 {
                padding:20px;
            }
            .backred {
                background-color:red;
            }
        </style>

		<title></title>
	</head>
    <body>
 
        <div id="app">
            <h1>姓名：<label v-text="Name"></label></h1>
            <h1>是否红领巾：<span class="class1" v-bind:class="{backred:IsBack}"><label v-if="IsBack">是</label></span></h1>
            <h1>学校星级：<span v-bind:style="{color:SchoolLevel}">aa</span></h1>
        </div>
    

        <script type="text/javascript">
        //Model
        var data = {
            Name: '小明',
            Age: 18,
            School: '光明小学',
            SchoolLevel: 'red',
            IsBack:true
        }
    
        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
        });
        </script>
    </body>
</html>
</nowiki>

[[文件:vue2022040702.png|600px]]