Vue中的属性绑定和双向数据绑定

最新推荐文章于 2024-06-16 09:37:39 发布

xuxinwen32

最新推荐文章于 2024-06-16 09:37:39 发布

阅读量314

点赞数

分类专栏：前端文章标签： Vue中的属性绑定和双向数据绑定

本文链接：https://blog.youkuaiyun.com/xuxinwen32/article/details/86673572

版权

前端专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了Vue.js中属性绑定和双向数据绑定的使用方法，通过实例展示了如何利用v-model实现输入框与数据的实时同步，是前端开发者掌握Vue框架必备的知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="../2.5.20-vue.js"></script>   <!--//提前加载，避免出现抖屏-->
</head>
<body>
<div id="root">
    <!--<div v-bind:title="title">hello world</div>-->
    <!--<div :title="title">hello world</div>         &lt;!&ndash;v-bind 和 :  是一样的 意思&ndash;&gt;-->
    <!--<div title={{title}}>hello world</div>-->
    <!--<input :value="content" />-->
    <input v-model="content" />     <!--数据双向绑定的方法  v-model -->
    <div>{{content}}</div>
</div>

<script>
    new Vue({
        el: '#root',  /**创建vue的实例，接管id等于root的内容*/
        data: {
            title: 'hello',
            content: 'content',
        },
        methods:{
            handClick() {
                alert(1)
            }
        }
    })
</script>

</body>
</html>