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>
相关推荐
Yolo@~2 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克2 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道2 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
清风絮柳2 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维2 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久3 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain3 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏3 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing3 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ3 小时前
React(九)React Hooks
前端·react.js