v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据



**最基础的就是实现一个联动的效果**

<body>
<div class="app">



&lt;span&gt;Multiline message is:&lt;/span&gt;

&lt;p&gt;{{message}}&lt;/p&gt;

&lt;br&gt;

&lt;textarea name="" v-model="message" placeholder="please write..."&gt;&lt;/textarea&gt;

</div>

</body>
<script>
new Vue({



 el:'.app'

})
</script>



**checkbox**

<body>
<div class="app">



&lt;input type="checkbox" id="jack" value="jack" v-model="checkedNames"&gt;

&lt;label for="jack"&gt;jack&lt;/label&gt;

&lt;input type="checkbox" id="John" value="John" v-model="checkedNames"&gt;

&lt;label for="jack"&gt;John&lt;/label&gt;

&lt;input type="checkbox" id="Mike" value="Mike" v-model="checkedNames"&gt;

&lt;label for="jack"&gt;Mike&lt;/label&gt;

&lt;br&gt;

&lt;span&gt;Checked names:{{checkedNames}}&lt;/span&gt;

</div>

</body>
<script>
new Vue({



 el:'.app',

 data:{

   checkedNames:[]

 }

})
</script>



**v-bind**

有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性

**结语**

感谢您的观看，如有不足之处，欢迎批评指正。

 原文地址：

深入解析Vue.js中v-bind v-model的使用和区别的更多相关文章

  1. 解析Vue.js中的computed工作原理

    我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的.写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指 ...

  2. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  3. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  4. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  5. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  6. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  7. vue.js中的slot

    vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...

  8. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  9. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

随机推荐

  1. idea maven projects 工具栏按钮的作用

    1.Execute Maven Goal  弹出可执行的 Maven 命令的输入框.有些情况下我们需要通过书写某些执行命令来构建项目,就可以通过此按钮 2.Toggle Offline Mode 英文 ...

  2. HDU 3480 Division DP斜率优化

    解题思路 第一步显然是将原数组排序嘛--然后分成一些不相交的子集,这样显然最小.重点是怎么分. 首先,我们写出一个最暴力的\(DP\): 我们令$F[ i ][ j ] $ 为到第\(i\)位,分成\ ...

  3. plt.plot() 无法使用参数ax

    问题参考 TypeError: inner() got multiple values for keyword argument 'ax' fig, ax=plt.subplots(2,1) plt. ...

  4. 在mac中，npm安装或者卸载失败，提示没有权限

    在终端输入 sudo chown -R $USER /usr/local 输入开机密码

  5. 在linux 系统下 使用命令行对mysql 数据库进行操作

    1.连接mysql root@test:/home# mysql -uroot -proot <uroot是用户名,proot是密码> 2.查询所有的库 mysql> show da ...

  6. 微信小程序底部菜单栏的使用方法

    1.找到项目根目录的配置文件 app.json,在配置文件中加入配置代码.例如: "tabBar": { <!--底部的导航配置属性--> "color&qu ...

  7. Ruby Programming学习笔记

    #将ARGV[0]转换成正则表达式类型 pattern= Regexp.new(ARGV[0]) #Devise gem包 Devise是Ruby中使用最广泛的身份验证gem包之一.Devise为我们 ...

  8. CPU处理多任务——中断与轮询方式比较

    中断方式与轮询方式比较   中断的基本概念 程序中断通常简称中断,是指CPU在正常运行程序的过程中,由于预选安排或发生了各种随机的内部或外部事件,使CPU中断正在运行的程序,而转到为相应的服务程序去处 ...

  9. kotlin之字符串模板

    所谓字符串模板就是在字符串中添加若干个占位符,内容会在后期指定,也就是说,用模板可以设置字符串动态的部分,模板使用美元符号$设置如i=$i 中 的$i就是一个占位符,其中4后面的i是变量,随着i的变化 ...

  10. delphi ASCII码表及键盘码表

    ASCII码表 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 ASCII值 控制字符 0 NUT 32 (space) 64 @ 96 . 1 SOH 33 ! 65 A 9 ...