vue v-bind两种写法

最新推荐文章于 2024-08-09 15:57:23 发布

战斗中的老段

最新推荐文章于 2024-08-09 15:57:23 发布

阅读量662

点赞数

分类专栏： vue 文章标签： vue html

本文链接：https://blog.csdn.net/qq_48203828/article/details/117091420

版权

vue 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令两种写法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
        <!-- 创建一个要控制的区域 -->

    <div id="app">
        <!-- 标准写法  v-bind:用于绑定属性的指令    缩写： -->
        <input type="button"  v-bind:title="message" value="按钮">
        <!-- 简写 -->
        <input type="button" :title="message2" value="简写bind">
        <!-- 简写+其他 -->
        <input type="button" :title="message2+123" value="简写bind">

    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:'这是按钮',
                message2:'按钮2'
            }
        })
    </script>
</body>
</html>