v-model 能轻松实现元素间的双向数据绑定。
v-bind 能实现组件元素属性的绑定。
例子
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-bind:style="theStyle">
{{message}}
</p>
<input v-model="message">
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message:"Hello Vue.js",
theStyle:'color:red'
}
})
</script>
</body>
</html>
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>