深入解析Vue.js中v-bind v-model的使用和区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据
**最基础的就是实现一个联动的效果**
<body>
<div class="app">
<span>Multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>
</div>
</body>
<script>
new Vue({
el:'.app'
})
</script>
**checkbox**
<body>
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>
**v-bind**
有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性
**结语**
感谢您的观看，如有不足之处，欢迎批评指正。
原文地址：深入解析Vue.js中v-bind v-model的使用和区别的更多相关文章
- 解析Vue.js中的computed工作原理
我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的.写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指 ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
- vue.js中的slot
vue.js 中的 slot 一.slot 的作用 调用组件的时候,对于数据,我们会用props将数据从父组件传至子组件.但是,如果从父组件到子组件,单纯是页面局部渲染的改变,slot会更合适. 二. ...
- Vue.js中css的作用域
Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
随机推荐
- Misplaced alignment tab character &
范例: 期望的标题效果:Literature review & Research set-up 在Latex里写的标题:\section{Literature Review & Res ...
- JavaWeb_(request和response)用户登录注册模板_基础版
用户登录注册模板进阶版 传送门 用户登录注册模板基础版 登录:当用户登录成功时,跳转到personCenter.jsp,当用户登录失败时,跳转到login.jsp并给出提示 注册:当用户注册成功时,跳 ...
- vue-router中，require代替import解决vue项目首页加载时间过久的问题
vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...
- mongo注解详解
1.@Entity如果你想通过Morphia把你的对象保存到Mongo中,你首先要做的是使用@Entity注解你的类:@Entity(value="comm_user_favorite_co ...
- python3笔记一：python基础知识
一:学习内容 注释 输入输出 标识符 变量和常量 二:注释 1. 单行注释 #:一个井号,代表我注释了这一行 2.多行注释 ''' ''':注释多行,三个单引号 3.多行注释 "" ...
- 基于Xposed hook 实时监测微信消息
本文以微信版本6.7.3为例进行分析有hook, 大部分做微信机器人的话,首先要实时抓取微信的消息,在这里展示三种方式对微信的消息进行hook: 1.基于UI层拉取加载进行监听 2.基于微信dao层调 ...
- 七、smarty--缓存的控制
1.建议缓存 $smarty->cacheing = true; //设置为2是给每一个模板设置缓存 $smarty->setCacheDir(“”); 2.处理缓存的生命周期 $smar ...
- 在RHEL6_Oracle_Linux_6上生成正确的udev_rule_规则文件
1. #首先确认是 Linux 6.0以上版本 [root@vrh6 dev]# cat /etc/issue Oracle Linux Server release 6.2Kern ...
- leetcode 94二叉树的中序遍历
递归算法C++代码: /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...
- latexdiff中的大坑：字符编码问题
最近用latex写文章,要用到修订模式,于是采用latexdiff命令生成修订版pdf.这原本是一个非常简单方便的方法,却隐藏着字符编码的问题,初次用可能会遇到意想不到的问题,让人很烦,比如,生成出来 ...