Vue之数据绑定

在我们Vue当中有两种数据绑定的方法
1.单向绑定
2.双向绑定

让我为大家介绍一下吧!

1、单向绑定(v-bind)

数据只能从data流向页面
举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        单向绑定:<input type="text" v-bind:value="name">
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    Vue.config.productionTip = false //阻止生产提示
    const vm = new Vue({
     
        el:"#root",
        data:{
     
            name:"张三"
        }
    })
</script>
</html>

在这里插入图片描述

2.双向绑定(v-model)

数据不仅能从data流向页面,还可以从页面流向data
注意:双向绑定一般都应用在表单类元素上(如:input、select等),.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

我们来用用双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root">
        单向绑定:<input type="text" v-bind:value="name"><br><br>
        双向绑定:<input type="text" v-model:value="name">
    </div>
</body>
<script src="../JS/vue.js"></script>
<script>
    Vue.config.productionTip = false //阻止生产提示
    const vm = new Vue({
     
        el:"#root",
        data:{
     
            name:"张三"
        }
    })
</script>
</html>

请添加图片描述
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关推荐

  1. vue数据

    2023-12-11 19:42:03       57 阅读
  2. Vue 双向数据

    2023-12-11 19:42:03       40 阅读
  3. Vue的双向数据原理

    2023-12-11 19:42:03       62 阅读
  4. vue3组件数据双向

    2023-12-11 19:42:03       53 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-11 19:42:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-11 19:42:03       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-11 19:42:03       82 阅读
  4. Python语言-面向对象

    2023-12-11 19:42:03       91 阅读

热门阅读

  1. 如何编写编写干净的 PHP 代码

    2023-12-11 19:42:03       55 阅读
  2. 抖音视频评论区采集软件使用教程

    2023-12-11 19:42:03       136 阅读
  3. 智能家居IC

    2023-12-11 19:42:03       59 阅读
  4. 实验七 子网的划分

    2023-12-11 19:42:03       46 阅读
  5. CCSDS标准中使用的9/整数小波变换(Matlab实现)

    2023-12-11 19:42:03       53 阅读
  6. pixmap must be grayscale or rgb to write as png

    2023-12-11 19:42:03       61 阅读
  7. 【东枫科技 招聘】实习:无线通信工程

    2023-12-11 19:42:03       50 阅读
  8. mysql 批量修改优化方案

    2023-12-11 19:42:03       50 阅读
  9. Boost.SafeNumerics模块测试:constexpr转换编程

    2023-12-11 19:42:03       52 阅读
  10. 滑动窗口与堆结合

    2023-12-11 19:42:03       52 阅读
  11. PHP基础 - 常量字符串

    2023-12-11 19:42:03       59 阅读
  12. Vue3中组合式ApI的父子组件的数据传递

    2023-12-11 19:42:03       102 阅读
  13. Linux watch命令监视命令输出

    2023-12-11 19:42:03       68 阅读