v-bind可以给标签中的任何属性动态绑定值；
v-bind可以简写成英文状态下的 :
插值语法
功能: 用于解析标签体内容；
语法:{{xxx}} ，xxxx会作为js 表达式解析；
指令语法
功能: 解析标签属性、解析标签体内容、绑定事件；
举例：v-bind:href = 'xxxx' ，xxxx会作为js 表达式被解析；
说明：Vue 中有有很多的指令，此处只是用v-bind 举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Vue模板语法</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}1</a>
<!-- v-bind的简写语法 -->
<a :href="school.url">点我去{{school.name}}2</a>
</div>
<script type="text/javascript" >
Vue.config.productionTip=false;//阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'百度',
url:'http://www.baidu.com',
}
}
})
</script>
</body>
</html>结果：
（图片中百度的网站名称有大写的是因为toUpperCase()导致的）
版权声明：本文为weixin_44564263原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。