5. Vue v-bind绑定元素属性的基本使用

Devops海洋的渔夫

发布于 2020-02-25 16:34:32

8880

发布于 2020-02-25 16:34:32

文章被收录于专栏：Devops专栏Devops专栏

v-bind的使用说明

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-bind的三种用法

直接使用指令v-bind
使用简化指令:
在绑定的时候，v-bind的绑定内容是js表达式，所以可以拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

下面来逐个示例一下：

示例一：直接使用执行 v-bind

下面使用v-bind方法来绑定一个input按钮的title属性，自定义title内容，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
    <div id="app">
        
        <!-- 使用v-bind绑定按钮的title内容 -->
        <input type="button" value="按钮" v-bind:title="mytitle">

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                mytitle: 'This is mytitle!'
            }
        })
    </script>

</body>
</html>

浏览器显示如下：