Vue.js常用指令：v-model
一、v-model指令
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。
使用v-model可以在表单控件或者组件上创建双向绑定。
代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
inputValue:"hello world",
chkState:true, //默认为true
chkArray:["1"], //处理成组的复选框需要定义一个数组，对应每个CheckBox的value值,这里默认第二个选中
chkLists:[{displayName:"科普读物",value:"0"},
{displayName:"中小学教材",value:"1"},
{displayName:"计算机科学",value:"2"}],
rdoCheck:"1",
// 动态处理radio
radioLists:[{name:"Gender",value:"1",displayName:"男"},
{name:"Gender",value:"2",displayName:"女"}],
sectionValue:"香蕉", // 没有value值，默认值就是name的值
sectionValue1:"0",
optionLists:[{value:"0",displayName:"苹果"},
{value:"1",displayName:"香蕉"},
{value:"2",displayName:"葡萄"}]
},
// 方法
methods:{ },
filters:{
toShowCheckBoxState:function(value){
return value==true?"选中":"未选中"
}
}
})
}
</script>
</head>
<body>
<div id="my">
<!--表单输入框 当inputValue的值为123的时候禁止输入-->
<input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}}
<!--复选框 v-model 当前的状态:true或者false-->
<div>
<input type="checkbox" v-model="chkState">当前选中状态:{{chkState | toShowCheckBoxState}}
</div>
<!--多个复选框 组 静态显示-->
<div>
<input type="checkbox" v-model="chkArray" value="0">唱歌
<input type="checkbox" v-model="chkArray" value="1">跳舞
<input type="checkbox" v-model="chkArray" value="2">打篮球
<p>当前选中的value值:{{chkArray}}</p>
</div>
<!--复选框 动态显示-->
<div>
<ul>
<li v-for="list in chkLists">
<input type="checkbox" v-model="chkArray" :value="list.value">{{list.displayName}}
</li>
</ul>
</div>
<!--单选框 静态显示 -->
<div>
<input type="radio" v-model="rdoCheck" name="Gender" value="1">男
<input type="radio" v-model="rdoCheck" name="Gender" value="2">女
<p>{{rdoCheck}}</p>
</div>
<!--单选框 动态显示-->
<div>
<ul>
<li v-for="list in radioLists">
<input type="radio" v-model="rdoCheck" :name="list.name" :value="list.value">{{list.displayName}}
</li>
</ul>
<p>{{rdoCheck}}</p>
</div>
<!--下拉框 静态显示 -->
<div>
<select v-model="sectionValue">
<option>苹果</option>
<option>香蕉</option>
<option>葡萄</option>
</select>
<p>{{sectionValue}}</p>
</div> <!--下拉框 静态显示 -->
<div>
<select v-model="sectionValue1">
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">葡萄</option>
</select>
<p>{{sectionValue1}}</p>
</div> <!--下拉框 静态显示 -->
<div>
<select v-model="sectionValue1">
<option v-for="list in optionLists" :value="list.value">{{list.displayName}}</option>
</select>
<p>{{sectionValue1}}</p>
</div>
</div>
</body>
</html>
二、v-model指令实例
下面代码利用v-model指令实现全选的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload = function(){
var vm =new Vue({
el:'#my',
data:{
checkAll: {name:'全选',check:false},
lists:[{name:'小米',check:true},
{name:'华为',check:false},
{name:'苹果',check:false},
{name:'中兴',check:false},
{name:'OPPO',check:false}]
},
methods: {
checkAllChange:function(){
vm.lists.forEach(function(item){
item.check = vm.checkAll.check;
});
},
curChange:function(){
//true的状态
var curTure = this.lists.filter(function(item){
return item.check ==true;
});
curTure.length == this.lists.length ? this.checkAll.check = true : this.checkAll.check = false ;
}
}
})
}
</script>
</head>
<body>
<div id='my'>
<input type="checkbox" v-model="checkAll.check" @change="checkAllChange()">
<label>{{checkAll.name}} {{checkAll.check}}</label>
<ul>
<li v-for="list in lists">
<input type="checkbox" v-model="list.check" @change="curChange()">
<label>{{list.name}} {{list.check}}</label>
</li> </ul>
</div>
</body>
</html>
Vue.js常用指令：v-model的更多相关文章
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
- 新人成长之入门Vue.js常用指令介绍（一）
写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
- Vue.js常用指令：v-for
一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...
- Vue.js常用指令：v-on
一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...
- Vue.js常用指令：v-show和v-if
一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...
- Vue.js常用指令：v-bind
一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...
随机推荐
- CF868 F. Yet Another Minimization Problem 决策单调优化 分治
目录 题目链接 题解 代码 题目链接 CF868F. Yet Another Minimization Problem 题解 \(f_{i,j}=\min\limits_{k=1}^{i}\{f_{k ...
- 2827: 千山鸟飞绝 非旋treap
国际惯例的题面:看起来很不可做的样子,我们先来整理一下题意吧.就是,维护每个点曾经拥有过的最大的两个属性值,支持把点的位置移动.我们用map对每个位置进行离散化,对每个位置建立一个平衡树.为了方便分离 ...
- [HihoCoder1369]网络流一·Ford-Fulkerson算法
思路: 最大流模板. #include<queue> #include<cstdio> #include<cctype> #include<vector> ...
- crm 中使用的Django方法
. 通过ChangeList封装好多数据 . 销售中公共资源:Q查询,3天 15天 . 使用yield实现 - 生成器函数,对数据进行加工处理 - __iter__和yield配合 . 获取Model ...
- linux 关于时间日期date
一.查看和修改Linux的时区 1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区 方法 A 命令 : "tzselect" ...
- java实现在线浏览zip文件及文件下载
应用背景:我们知道压缩文件中某一个文件的名字,只想下载这个文件而不下载整个压缩文件. 先来看一上QQ邮箱的附件浏览: 以下是我们第一个版本的: 业务逻辑中还要判读用户是否有此文件的防问权限 2017- ...
- oracle的start with connect by prior如何使用
oracle的start with connect by prior是根据条件递归查询"树",分为四种使用情况: 第一种:start with 子节点ID='...' connec ...
- facebook's HipHop for PHP: Move Fast
One of the key values at Facebook is to move fast. For the past six years, we have been able to acco ...
- centos7下opencv3的安装
前面说过opencv和python模块的安装,版本是基于opencv 2的,这篇主要说一下opencv3的安装过程以及相关依赖问题的解决,同样opencv3的安装包在官网上可以下载,最新稳定版是3.3 ...
- Redis进阶之redis的生命周期
D:\Redis-x64-3.2.100>redis-cli.exe -h 127.0.0.1 -p 6379127.0.0.1:6379> set aa "123"( ...