03.Vue2.x数据绑定(v-bind v-model)

文章目录

数据绑定(单向&双向)

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        1.单向数据绑定(v-bind):数据只能从data流向页面
        2.双向数据绑定(v-model):数据不近能从data流向页面,还可以从页面流向data
        备注:
            1.双向数据绑定一般都是针对表单类元素
            2.v-model:value 可以简写为v-model,因为v-model默认收集value值
     -->
    <div id="root">
      单向数据绑定(v-bind):<input type="text" v-bind:value="msg" /> <br /><br />
      双向数据绑定(v-model):<input type="text" v-model:value="msg" /><br /><br />

      单向数据绑定(v-bind):<input type="text" :value="msg" /> <br /><br />
      双向数据绑定(v-model):<input type="text" v-model="msg" /><br /><br />
      <textarea cols="20" rows="10" v-model="msg"></textarea>
    </div>
    <script>
      new Vue({
        el: "#root",
        data: {
          msg: "学习真好",
        },
      });
    </script>
  </body>
</html>
相关推荐
苹果酱056711 分钟前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
斯~内克12 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia1 小时前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby1 小时前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云1 小时前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
一千柯橘1 小时前
Nestjs 解决 request entity too large
javascript·后端
土豆骑士1 小时前
monorepo 实战练习
前端
土豆骑士1 小时前
monorepo最佳实践
前端