Vue.js 双向绑定

最新推荐文章于 2024-04-22 09:07:57 发布
最新推荐文章于 2024-04-22 09:07:57 发布
阅读量450 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Justdoforever/article/details/111557704
版权

Vue.js 双向绑定

v-model 双向绑定

前面的例子，都是把 Vue对象上的数据显示在视图上，那么如何把视图上的数据放到Vue对象上去呢？
这时就需要用到v-model进行双向绑定
像这样，当input里面的值发生变化的时候，就会自动把变化后的值，绑定到Vue对象上去了
 
 <input v-model="name" >

如：

<script src="https://how2j.cn/study/vue.min.js"></script>
  
<div id="div1">
	
	hero name: <input v-model="name" >
	<button @click="doClick" >提交数据</button>
	
</div>
   
<script>
 
new Vue({
      el: '#div1',
      data:{
		name:"teemo"
      },
      methods:{
    	  doClick:function(){
    		  alert(this.name);
    	  }
      }
    })
   
</script>

多种数据风格的数据绑定

<script src="https://how2j.cn/study/vue.min.js"></script>
   
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
    
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
 
<div id="div1">
   
    <table align="center" >
        <tr class="firstLine">
            <td>视图类型</td>
            <td>输入数据</td>
            <td>绑定到Vue上的数值</td>
        </tr>        
        <tr>
        	<td>
        		单行文本
        	</td>
        	<td>
				<input v-model="input" placeholder="输入数据">
        	</td>
        	<td>
	        	<p>{{ input }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		多行文本
        	</td>
        	<td>
        		<textarea v-model="textarea1" placeholder="输入数据"></textarea>
        	</td>
        	<td>
	        	<p>{{ textarea1 }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		单个复选框
        	</td>
        	<td>
        		<input type="checkbox" id="checkbox" v-model="checked">
        	</td>
        	<td>
	        	<p>{{ checked }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		多个复选框
        	</td>
        	<td>
				  <input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
				  <label for="teemo">teemo</label>
              <!--id = "",for = "",是规范不写也能运行，value是选择的真实值，lable是显示的值-->
				  <input type="checkbox"  value="gareen7" v-model="checkedes">
				  <label>gareen0</label>
				  <input type="checkbox" id="annie" value="annie1" v-model="checkedes">
				  <label for="annie">annie</label>
        	</td>
        	<td>
	        	<p>{{ checkedes }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		单选按钮
        	</td>
        	<td>
			  <input type="radio" id="one" value="One" v-model="radio">
			  <label for="one">One</label>
			  <br>
			  <input type="radio" id="two" value="Two" v-model="radio">
			  <label for="two">Two</label>
        	</td>
        	<td>
	        	<p>{{ radio }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		单选选择框
        	</td>
        	<td>
			  <select v-model="selected" size="5">
			    <option disabled value="">请选择</option>
			    <option>AD</option>
			    <option>AC</option>
			    <option>ADC</option>
			  </select>
        	</td>
        	<td>
	        	<p>{{ selected }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		多选选择框
        	</td>
        	<td>
        	  (通过ctrl或者shift进行多选)<br>
			  <select v-model="selecteds" multiple size="5">
			    <option disabled value="">请选择</option>
			    <option>AD</option>
			    <option>AC</option>
			    <option>ADC</option>
			  </select>
        	</td>
        	<td>
	        	<p>{{ selecteds }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		单个复选框
        	</td>
        	<td>
        	    默认值是true或者false,也可以修改为自定义的值<br>
        		<input type="checkbox" id="toggle" true-value="yes1" false-value="no1" v-model="toggle">
        	</td>
        	<td>
	        	<p>{{ toggle }}</p>    
        	</td>
        </tr>        

    </table>
 
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data: {
          input:'',
          textarea1:'',
          checked:'',
          checkedes:[],
          radio:'',
          selected:'',
          selecteds:[],
          toggle:'',
          
      }
    })
    
</script>

修饰符

.lazy

没加.lazy就是实时更新，加了.lazy后便是鼠标失去焦点时更新

<script src="https://how2j.cn/study/vue.min.js"></script>
   
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
    
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
 
<div id="div1">
   
    <table align="center" >
        <tr class="firstLine">
            <td>视图类型</td>
            <td>输入数据</td>
            <td>绑定到Vue上的数值</td>
        </tr>        
        <tr>
        	<td>
        		单行文本1
        	</td>
        	<td>
				<input v-model.lazy="input1" placeholder="输入数据">
        	</td>
        	<td>
	        	<p>{{ input1 }}</p>    
        	</td>
        </tr>
        <tr>
        	<td>
        		单行文本2
        	</td>
        	<td>
				<input v-model.lazy="input2" placeholder="输入数据">
        	</td>
        	<td>
	        	<p>{{ input2 }}</p>    
        	</td>
          
         
        </tr>
      <tr>
        <td> 
        	多行文本
        </td>
         <td ><textarea v-model.lazy="textarea" placeholder="输入数据"></textarea>
          <td>
            <p> {{textarea}}</p>
          </td>
      </tr>
       <tr>
        <td> 
        	多行文本实时更新
        </td>
         <td ><textarea v-model="textarea2" placeholder="输入数据"></textarea>
          <td>
            <p> {{textarea2}}</p>
          </td>
      </tr>
    </table>
 
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data: {
          input1:'',
          input2:'',
          textarea:'',
        textarea2:''
          
      }
    })
    
</script>

.number

将String类型转为number数值类型，进行计算

<script src="https://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>视图类型</td>
            <td>输入数据</td>
            <td>绑定到Vue上的数值</td>
            <td>数值类型</td>
        </tr>       
        <tr>
            <td>
                单行文本1
            </td>
            <td>
                <input v-model="input1" type="number" placeholder="输入数据">
            </td>
            <td>
                <p>{{ input1 }}</p>   
            </td>
            <td>
            	<p>{{ typeof input1 }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单行文本2
            </td>
            <td>
                <input v-model.number="input2"   type="number"  placeholder="输入数据">
            </td>
			<td>
                <p>{{ input2 }}</p>   
			</td>
            <td>
                <p>{{ typeof input2 }}</p>   
            </td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
          input1:'',
          input2:''
           
      }
    })
     
</script>

.trim

trim 去掉前后的空白

Justdoforever
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解vue.js双向绑定的实现原理
10-20
vue.js是MVVM结构的，同类的还有AngularJs；至于MVC、MVP、MVVM的比较网上已经有很多了，这样不再...这篇文章将给大家深入的介绍vue.js双向绑定的实现原理，有需要的朋友们可以参考借鉴，下面跟着小编一起来看看吧。
Vue.js双向绑定实现原理详解
10-20
主要为大家详细介绍了Vue.js双向绑定实现原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue---双向绑定
maidu_xbd的博客
04-21 5507
vue 中的双向绑定是语法糖。vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。数据和视图同步改变。
Vue基础知识总结 6：vue双向绑定原理
学Java，找哪吒
10-02 1万+
需求分析： 通过输入框，双向绑定文本框显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :number1="num1" :number2="num2"/> &lt
vue的双向数据绑定
最新发布
贫僧法号依平
04-22 1265
我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了ViewModel的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定关系图如下。
vue双向绑定原理
热门推荐
我是一颗草，哪里荒凉往哪里长
03-07 4万+
** Vue双向绑定的原理 再讲双向双向绑定之前我们需要来了解下MVVM模式 MVVM（Model-View-ViewModel）是对 MVC（Model-View-Control）和 MVP（Model-View-Presenter）的进一步改进。 View：视图层（UI 用户界面） ViewModel：业务逻辑层（一切 js 可视为业务逻辑，也就是前端的日常工作） Model：数据层（存储数据及对数据的处理如增删改查） MVVM 将数据双向绑定（data-binding）作为核心思想，Vie
vue的双向绑定原理及实现
ZJLOVE的博客
07-09 3663
VUE双向绑定
如何使用Vue实现自定义双向数据绑定？
高宇辰
06-06 2758
在Vue中，双向数据绑定是一项非常强大的功能，它能够使数据和视图之间保持同步，让开发者更加方便的操作数据，在本文中我们将介绍如何用Vue实现数据的双向绑定，实现方法主要有以下两种：
Vue.js双向绑定操作技巧(初级入门)
10-20
在Vue.js中，双向绑定是一项核心特性，它简化了数据和视图之间的交互，使得开发者能够更加专注于应用逻辑，而不是繁琐的DOM操作。本文将深入探讨Vue.js的双向绑定操作技巧，特别针对初级入门者。 首先，要实现双向...
最基础的vue.js双向绑定操作
10-19
主要为大家详细介绍了最基础的vue.js双向绑定操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue -- 双向数据绑定原理
muzidigbig的博客
03-27 5355
Vue的双向数据绑定原理先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过来劫持各个属性的，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化。
浅谈vue双向绑定的原理
u010208165的博客
08-20 3453
一、什么是双向绑定 我们先从单向绑定切入 单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新 双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定 举个栗子 当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定 关系图如下 二、双向绑定的原理是什么 我们都知道 Vue 是数
Vue 双向绑定：让数据与视图互动的魔法！(上)
你若盛开，清风自来
12-12 1486
Vue 双向绑定是指在 Vue 框架中，当数据发生变化时，视图会自动更新，反之亦然。这意味着当用户在界面上修改数据时，相应的 Model 也会自动更新，而当 Model 中的数据发生变化时，视图也会自动更新。以下是一个示例，展示了 Vue 双向绑定的工作原理：data() {return {data() {return {data() {return {data() {return {data() {return {data() {return {data() {
用JS简单实现Vue的双向绑定
编程界明世隐的博客
04-08 2589
Vue实现数据双向绑定原理： 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。 这里来简单模拟一下双向绑定。 特点 1.比如input被监视，当输入发送改变时，...
初识Vue，Vue基础-浅试双向绑定（超精简，超详细）
m0_74794442的博客
11-05 200
初识Vue，浅试双向绑定（用户数据共享，事件绑定），插值表达式
Vuejs——（1）入门（单向绑定、双向绑定、列表渲染、响应函数）
qq20004604的博客
08-23 1万+
参照链接： http://cn.vuejs.org/guide/index.html 【起步】部分 本文是在其基础上进行补全和更详细的探寻 嗯，根据朋友的建议，我改投vue阵营了   （一）单向绑定 {{ message }} new Vue({ el: '#app', data: {
vuejs双向数据绑定
I_recluse的博客
10-27 1396
vuejs 双向绑定给我们开发带来了很大的方便，主要用在表单中，通过v-model指令实现。 那么什么是双向数据绑定？下面这张图可以很好的说明： 绑定的双方：view层的DOM和Model层的javascript对象。 第一层绑定：将javascript对象数据通过vuejs实现的规则绑定到DOM中。上代码： 这是从JavaScript对象向DOM绑定，即通过vm实例的data...
Vue.js双向绑定的实现原理
嘿嘿
03-09 431
Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。本文仅探究双向绑定是怎样实现的。先讲涉及的知识点，再用简化得不能再简化的代码实现一个简单的 hello world 示例。 　　参考文章：https://segmentfault.com/a/1190000006599500 一、访问器属性 访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过 defineProperty() 方法单独定义。 var obj = { }; ...
vue.js数据绑定
10-18
v-model 可以将表单元素的值与 Vue 实例中的数据进行双向绑定，即当表单元素的值发生变化时，Vue 实例中的数据也会随之改变，反之亦然。 例如，我们可以在 Vue 实例中定义一个名为 message 的数据属性，并将其与一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值