v-model实现数据的双向绑定

Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，

比如，在数据框上使用时，输入的内容会实时映射到绑定的数据上。

<div id="app"><input type="text" v-model="message" placeholder="输入你的内容"><p>输入的内容是：{{message}}</p></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el:'#app',data:{message:''}})
</script>

对于文本域textarea也是同样的用法：

<div id="app1"><textarea v-model="text" placeholder="请输入你的内容"></textarea><p>输入的内容是：</p><p style="white-space:pre">{{text}}</p></div>var app1 = new Vue({el:'#app1',data:{text:''}})

完整代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Vue V-model实现双向绑定的基本用法</title></head><body><div id="app"><input type="text" v-model="message" placeholder="输入你的内容"><p>输入的内容是：{{message}}</p></div><div id="app1"><textarea v-model="text" placeholder="请输入你的内容"></textarea><p>输入的内容是：</p><p style="white-space:pre">{{text}}</p></div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app = new Vue({el:'#app',data:{message:''}})var app1 = new Vue({el:'#app1',data:{text:''}})
</script></body>
</html>

v-model实现数据的双向绑定相关推荐

【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
AngularJS数据的双向绑定
数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controlle ...
vue3数据的双向绑定
vue3关于数据的双向绑定一.script setup 现在,没必要把数据写到data里面,或者是写一个setup函数,再进行return出去. import进来的组件,可以直接在页面中使用,不再需 ...
Vue之数据的双向绑定
在vue中实现数据双向绑定的核心在于v-model 示例: <input type="text" name=" " v-model="userN ...
微信小程序input数据的双向绑定
先来看一下html代码再来看下js代码这种绑定实例就是给input的一个bindinput属性,指定了一个方法名字.如果想要实现双向绑定,必须使用this.setdata这个方法. 注意!我们在发 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
angularjs input标签用一个日期插件后数据不能双向绑定了_微信如何定时发朋友圈？（最方便最好用的办法！）...
微信怎么发朋友圈(微信如何定时发朋友圈)作为一个运营新媒体的小编,很多情况下,我都会遇到定时发文的情况,对于我来说,定时发文很简单. 只要将文案编辑好,使用平台的定时发文功能就可以,所以,我就想,微信 ...

v-model实现数据的双向绑定

v-model实现数据的双向绑定相关推荐

最新文章

热门文章