指令2——（v-bind）
2019-02-27 本文已影响0人
小丘啦啦啦
一、v-bind
用来绑定html属性，使属性的值从Vue对象的数据中获得，借此控制标签的属性对应的值。
v-bind可简写为（:）。
v-bind中可以写合法的js表达式。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 用v-bind来绑定value属性，值为变量，变量值取Vue对象data内数据 -->
<input type="button" v-bind:value="val">
<!-- v-bind简写 -->
<input type="button" :value="val">
<!-- v-bind中加上其他js表达式 -->
<input type="button" :value="val+'我是其他js表达式'">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: '按钮的值我来定'
}
})
</script>
</body>
</html>
