v-bind
v-bind 指令用来 绑定HTML 属性中的值。
<input type="button" v-bind:value="btn1" />
可以用 [:] 代替 [v-bind]
<input type="button" :value="btn2" />
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lesson 5 v-bind</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p><input type="button" v-bind:value="btn1" v-on:click="func1()" /></p>
<p><input type="button" :value="btn2" @click="func2()" /></p>
</div>
<script>
let tmp = new Vue({
el: "#app",
data: {
"message": "Hello Vue",
btn1: "按钮1",
btn2: "按钮2",
},
methods: {
"func1": function () {
this.message = "按钮1被按了"
this.btn1 = "我被按了"
this.btn2 = "按钮2"
},
"func2": function () {
this.message = "按钮2被按了"
this.btn1 = "按钮1"
this.btn2 = "我被按了"
},
}
})
</script>
</body>
</html>