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 ...
随机推荐
- 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——实现篇：（九）以g711-mulaw为例添加新的编码格式解析支持
一.myRtspClient音频解析架构 AudioTypeBase是处理解析各种编码的音频数据的接口类.处理MPA数据的MPEG_Audio类和处理g711-mulaw的PCMU_Audio类均从A ...
- WinRAR 5.40 & 4.20 & 3.93 的注册码 - rarreg.key
把下面的数据复制到“记事本”中,用文件名“rarreg.key”命名该文件,保存到WinRAR安装文件夹即完成注册. 以下4个Key随便选一个复制都可以. WinRAR 5.40 版Key,复制箭头中 ...
- matlab 字符串处理函数
https://www.cnblogs.com/emanlee/archive/2012/09/13/2683912.html % 字符串处理 a=' a';b='b b';c='cccc';m= ...
- LeetCode83.删除排序链表中的重复的元素
给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2->3-&g ...
- Unity shader学习之屏幕后期处理效果之边缘检测
边缘检测的原理是利用一些边缘检测算子对图像进行卷积操作. 转载请注明出处:http://www.cnblogs.com/jietian331/p/7232707.html 例如: 代码如下: usin ...
- idea软件上设置爱彼迎字体
- OWASP top 10
OWASP Top 10 A1: InjectionSolution+Validate User Input+Never concatenate queries and date+Parameteri ...
- IE浏览器解决无法识别js中getElementsByClassName问题
关于ie浏览器无法识别js中getElementsByClassName问题,现通过以下方法,引用如下js /** *打印js对象详细信息 */ function alertObj(obj) { va ...
- 数据分析之Numpy库入门
1.列表与数组 在python的基础语言部分,我们并没有介绍数组类型,但是像C.Java等语言都是有数组类型的,那python中的列表和数组有何区别呢? 一维数据:都表示一组数据的有序结构 区别: 列 ...
- html5-特殊符号的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...