博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
记一次Vue中v-model和v-bind区别
阅读量:5879 次
发布时间:2019-06-19

本文共 891 字,大约阅读时间需要 2 分钟。

由于v-model 只是语法糖, <input v-model="message"> 与下面的两行代码是一致的:

<input v-bind:value="message" v-on:input="message = $event.target.value" />

<input :value="message" @input="message = $event.target.value" />

<p v-bind:class="someclass"></p>

如果不加 v-bind 那么 someclass 就是个常量,没有任何动态数据参与。当加上 v-bind 之后,它的值 someclass 不是字符串,而是vue实例对应的 data.someclass 这个变量。

做一个实验:

在data对象中创建两个变量:name,value

<input :value="name" v-model="body">

显示两个变量值:

<h1>{

{name}}---{
{body}}</h1>

结果:

1、修改input输入框中的值,body随着输入框的值变化,name不变

   修改name的值,输入框和body都不变

2、将v-model=“body”去掉,即<input :value="name" >

   修改input输入框中的值,name不变

      修改name的值,输入框也随之变化

3、给name和body都赋初始值,即name:"name",body:"body"

    当<input :value="name" v-model="body">,输入框初始值为body

  当i<input :value="name" >,输入框初始值为name

总结:

v-model会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值

 

转载于:https://www.cnblogs.com/hrrsdtc/p/10688397.html

你可能感兴趣的文章
spring xml properties split with comma for list
查看>>
判断点是否在三角形内
查看>>
Android实战简易教程-第二十三枪(基于Baas的用户注冊验证username是否反复功能!)...
查看>>
在odl中怎样实现rpc
查看>>
leetcode 110 Balanced Binary Tree
查看>>
python活用isdigit方法显示系统进程
查看>>
项目开发总结
查看>>
知行合一
查看>>
jmeter插件之jsonpath提取响应结果和做断言
查看>>
发布支持多线程的PowerShell模块 —— MultiThreadTaskRunner
查看>>
Ubuntu ctrl+alt会导致窗口还原的问题
查看>>
第四十期百度技术沙龙笔记整理
查看>>
推荐系统那点事 —— 基于Spark MLlib的特征选择
查看>>
linux 下RTL8723/RTL8188调试记录(命令行)【转】
查看>>
SpringMVC案例1——对User表进行CRUD操作
查看>>
看雪CTF第十四题
查看>>
[Contiki系列论文之1]Contiki——为微传感器网络而生的轻量级的、灵活的操作系统...
查看>>
Android 网络编程 记录
查看>>
微软同步发行Windows 10和Windows 10 Mobile系统更新
查看>>
Maven 传递依赖冲突解决(了解)
查看>>