【vue】数据绑定

最新推荐文章于 2024-08-13 09:40:14 发布

呱太

最新推荐文章于 2024-08-13 09:40:14 发布

阅读量133

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_35650513/article/details/122279872

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中单向和双向数据绑定的概念及用法。通过`v-bind`实现单向绑定，`v-model`实现双向绑定。示例代码展示了如何在输入框中应用这些绑定，强调了`v-model`在表单元素上的使用及其简写形式。

摘要由CSDN通过智能技术生成

<!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">
    <script src="../vue.js"></script>
    <title>Document</title>
   
    
</head>
<body>
  
    <!--
        单向数据绑定：利用v-bind
        双向数据绑定：利用v-model
    -->
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="msg">
        <br>
        双向数据绑定：<input type="text" v-model:value="msg2">
    
        <!--
            v-model只能用于 表单类元素（输入类元素），含有value值
            v-model:value可以简写为v-model，因为它默认绑定value

        -->
        <hr>
        单向数据绑定：<input type="text" :value="msg">
        <br>
        双向数据绑定：<input type="text" v-model="msg2">
    </div>

    
    <script>
        var vm=new Vue({
            el:"#root",
            data:{
                msg:"hello",
                msg2:"hello",
            },
              
        })
        
    </script>
</body>
</html>