指令2——（v-bind）

作者: 小丘啦啦啦 | 来源:发表于2019-02-27 11:39 被阅读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>