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 ...
随机推荐
- asp.net几个重要对象
DataSet是用来做连接sql的一种方法,意思是把数据库的副本存在应用程序里,应用程序开始运行时,把数据库相关数据保存到DataSet.DataTable表示内存中数据的一个表.常和DefaultV ...
- [LeetCode] 34. Find First and Last Position of Element in Sorted Array == [LintCode] 61. Search for a Range_Easy tag: Binary Search
Description Given a sorted array of n integers, find the starting and ending position of a given tar ...
- PHP "松散比较"
PHP 的整数和字符串比较是 "松散比较" var_dump('dev' == 0); bool(true) switch switch 在进行比较的时候,只是对值进行比较(&qu ...
- 隐藏apache服务器信息
安装完apache一般第一时间都是关闭apache的版本信息,黑客会通过apache暴露出来的信息针对性的入侵,为了服务器的安全这些信息一定要及时关闭. 1.隐藏PHP版本 修改php.ini exp ...
- cocos2d JS 利用定时器实现-倒计时功能
//创建一个定时器 cc.director.getScheduler().schedule(this, this.updates, 1, cc.REPEAT_FOREVER, 0, false, &q ...
- 为Flex Builder设置测试服务器
当用Flex Builder测试一个Flex应用时,它默认情况下会调用系统自带浏览器直接从bin-debug文件夹打开相应的html文件.浏览器中URL地址形式如file:///C:/AllESRI/ ...
- 安装Esxi 6.5
最详细安装Esxi 6.5 Exsi 是一款虚拟化系统,与VMware,VirtualBox不同,它不需要安装在其他操作系统上,直接运行在裸机上:占用系统资源很小,易于管理,所以被大多数中小型 ...
- html5-边框属性
width: 500px; height: 300px; background: rgb(122,30,60); border: 10px solid black; /*bor ...
- 使用JFileChooser实现在指定文件夹下批量添加根据“数字型样式”或“非数字型样式”命令的文件夹
2018-11-05 20:57:00开始写 Folder.java类 import javax.swing.JFrame; import javax.swing.JPanel; import jav ...
- ATM取款机
package Tests; import java.io.BufferedReader;import java.io.File;import java.io.FileInputStream;impo ...