vue中的指令v-model
Vue的指令：其实就是单个JavaScript表达式，一般来说是带有v-前缀；都有着对应的官网介绍：https://cn.vuejs.org/v2/guide/forms.html
v-model：数据双向绑定
下面是一个关于数据绑定的小案例：
页面初始时：
在输入框input中加入v-model后，当在输入框中输入内容，其对应绑定的数据也对应的发生改变，下图输入框绑定username为例：
v-model指令的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{ username:"bob",
num:"",
interest:['唱歌','跳舞','游泳'],
user:{
name:'keli',
age:''
}
} })
}
</script>
<body>
<div id="two">
用户信息：<input type="text" v-model="username"/><br />
昵称：
{{username}}<br />
编号：
{{num}}<br />
兴趣：{{interest}}<br />
个人信息：
姓名：{{user.name}}
年龄：{{user.age}} </div>
</body>
</html>
v-model在其他控件上的使用
input中的checkbox类型，初始时将其设置为false，当使用v-model进行绑定后，勾选后，变为true，其效果如下：
实现该效果的核心代码：
vue部分
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{
checked:false } })
}
</script>
HTML：
<div id="two">
<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}} </div> </div>
当定义一个空的数组在vue中时：
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{
checked:false,
utils:[] } })
}
</script>
其初始效果：
勾选不同的浏览器的时候，其浏览器的名称会显示在空的数组中：
html的代码：
<div id="two">
<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}} </div>
<div id="multi-checkbox" >
<input type="checkbox" value="baidu" v-model="utils" />baidu
<input type="checkbox" value="IE" v-model="utils" />IE
<input type="checkbox" value="Lynx" v-model="utils" />Lynx
<br />
选中的浏览器：{{utils}} </div> </div>
v-model应用在下拉列表控件
初始效果：
数据的绑定后：
vue:
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{ selected:"" } })
}
</script>
html:
<div id="two">
<div id="select">
<select v-model="selected">
<option disabled="disabled" value="">--请选择--</option>
<option> java</option>
<option> html</option>
<option> java web</option>
<option>javascript</option>
</select>
已选择:{{selected}}
</div>
</div>
v-model应用在文本控件：
vue：
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{ msg:"" } })
}
</script>
HTML：
<div id="two">
<div id="textarea">
<textarea v-model="msg" placeholder=" 请输入描述内容.......">
</textarea>
<p>{{msg}}</p>
</div>
</div>
v-model在以上控件上的使用的所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:'#two',
data:{
// checked:false,
// utils:[],
// selected:"",
msg:"" } })
}
</script>
<body>
<div id="two">
<!--<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}} </div>
<div id="multi-checkbox" >
<input type="checkbox" value="baidu" v-model="utils" />baidu
<input type="checkbox" value="IE" v-model="utils" />IE
<input type="checkbox" value="Lynx" v-model="utils" />Lynx
<br />
选中的浏览器：{{utils}} </div>--> <!--<div id="select">
<select v-model="selected"> <option disabled="disabled" value="">--请选择--</option>
<option> java</option>
<option> html</option>
<option> java web</option>
<option>javascript</option>
</select> 已选择:{{selected}}
</div>
--> <div id="textarea"> <textarea v-model="msg" placeholder=" 请输入描述内容......."> </textarea> <p>{{msg}}</p>
</div> </div> </body>
</html>
v-model在不同控件上的使用.html
vue中的指令v-model的更多相关文章
- Vue中插槽指令
08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue中的指令（听博主说总结的很好）
指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签 ...
- vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
随机推荐
- MySQL数据库SQL修改数据规范
start transaction; select id,rname,free_course_ph,cmp_id,free_date_limit_ph from ebk_students WHERE ...
- [LeetCode] 506. Relative Ranks_Easy tag: Sort
Given scores of N athletes, find their relative ranks and the people with the top three highest scor ...
- [LeetCode] 876. Middle of the Linked List_Easy tag: Linked List ** slow, fast pointers
Given a non-empty, singly linked list with head node head, return a middle node of linked list. If t ...
- tensorflow mac安装方法
480 pip install https://storage.googleapis.com/tensorflow/mac/tensorflow-0.5.0-py2-none-any.whl 481 ...
- iNotify.js通知JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。
https://github.com/jaywcjlove/iNotify JS 实现浏览器的 title 闪烁.滚动.声音提示.chrome.Firefox.Safari等系统通知. 这是重 ...
- CentOS6.5安装RHBase
1.安装依赖包 yum install automake libtool flex bison pkgconfig gcc-c++ boost-devel libevent-devel lib-dev ...
- gparted 不能起作用的时候，用fdisk
我用的是vmware,从网上下载的centos 6.3版本,通过yum update,其最后更新为6系列的最终版本6.7. 没有仔细看磁盘空间,因为某种原因,为了远程登录,我安装了xfce4桌面,后来 ...
- 关于设置cookie同源，axios请求加上cookie
一个有cookie 一个没有 这是为啥!! axios都设置了的为true允许携带cookie 大佬答疑解惑:==>cookie同源域名才有啊,在Application看看cookie的pat ...
- C#通过RFC连接sap系统
先理解一下 RFC(Romote Function Call)远程函数调用 调用前提: 1.要想通过C# 通过RFC调用SAP端,SAP端要存在RFC远程调用的函数才行(例如SAP端通过SE37创建) ...
- Dapper基础入门
Dapper是一个轻量级的ORM.之前最常用的ORM是EF,其实EF底层是Ado.net实现的. 现在基本上已经远离SqlHelper时代了. Dapper是开源的 https://github.c ...