v-bind: 绑定标签属性
v-bing:id 动态绑带id
v-bind:title 鼠标移动至元素时，可以tip弹出绑定title值
v-bind:class 动态切换class样式（例如tab改为激活样式）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.green {
color: green
}
.a {
color: red
}
</style>
</head>
<body>
<div id="app">
<span :id="'list-'+id">动态绑定id</span>
<!--v-bind:title 指令把所在的<div>元素的 title 的值和 message这个属性值绑定在一起了。
鼠标移动到元素上时，会将title弹出提示
-->
<div v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</div>
<!--red为true时，a生效(默认green生效)-->
<p class="green" v-bind:class={a:red}>测试</p>
<p v-on:click="changeColor">点击改变颜色</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString(),
red: false,
id:1
},
methods: {
changeColor: function() {
this.red = !this.red;
}
}
});
</script>
</html>
