day 68
表单指令
v-model="变量",变量值与表单标签的value相关v-model可以实现数据的双向绑定，v-model绑定的变量值可以影响表单标签的值，反过来单标签的值也可以影响变量的值
<body>
<div id="d1">
<form action="">
<!--变量的值可以影响标签的值, 标签的值也可以影响变量的值-->
用户名:<input type="text" name="username" v-model="v1" placeholder="请输入用户名">
<!--上面输入什么, 这里就展示什么-->
<input type="text" v-model="v1">
{{ v1 }}
<hr>
<!--1.单选框-->
男:<input type="radio" name="gender" value="male" v-model="v2">
女:<input type="radio" name="gender" value="female" v-model="v2">
{{ v2 }}
<hr>
<!--2.单一复选框, true|false-->
卖身抵债: 同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
<hr>
<!--3.复选框-->
爱好: <br>
男:<input type="checkbox" name="hobby" value="male" v-model="v4">
女:<input type="checkbox" name="hobby" value="female" v-model="v4">
其他:<input type="checkbox" name="hobby" value="other" v-model="v4">
{{ v4 }}
<hr>
<button type="submit">提交</button>
</form>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
v1: 'username',
v2: 'male',
v3: false,
v4: ['female', 'male']
}
})
</script>
条件指令
v-show="布尔值变量"，隐藏时，采用display:none进行渲染v-if="布尔值变量"，隐藏时，不在页面中渲染
注意
上述两种条件指令，推荐使用v-show，v-show的渲染方式更多。v-if能够保证不渲染的数据泄露，安全性高
v-if|v-else-if|v-else
当v-if条件不成立时会运行v-else-if，只有v-if和v-else-if的条件均不成立时，才会运行v-else，且v-else不需要添加条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件指令</title>
<style>
.box {
height: 200px;
width: 200px;
}
.r {
background-color: red;
}
.g {
background-color: green;
}
.b {
background-color: blue;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<!--当is_show为false时, display:none-->
<div class="box r" v-show="is_show"></div>
<!--当is_show为false时, 直接不渲染, 右键检查找不到代码-->
<div class="box g" v-if="is_show"></div>
<hr>
<!--点击相应按钮显示对应颜色的box,且该按钮高亮-->
<div class="wrap">
<button @click="boxColor='r'" :class="{active: boxColor === 'r'}">红</button>
<button @click="boxColor='g'" :class="{active: boxColor === 'g'}">绿</button>
<button @click="boxColor='b'" :class="{active: boxColor === 'b'}">蓝</button>
<div class="box r" v-if="boxColor === 'r'"></div>
<div class="box g" v-else-if="boxColor === 'g'"></div>
<div class="box b" v-else></div>
</div>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
is_show: false,
boxColor: 'r'
}
})
</script>
</body>
</html>
循环指令
v-for="v in string|array|objv-for="(v, i ) in string|arrayv-for="(v, k, i) in dict
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="d1">
<p>{{ msg }}</p>
<span v-for="v in msg">{{ v }} </span>
<br>
<!--i:索引-->
<span v-for="(v, i) in msg">{{ i }}:{{ v }} </span>
<hr>
<!--对字典进行for循环拿到的是值-->
<div v-for="v in infoDic">{{ v }}</div>
<!--k:键, i:索引-->
<div v-for="(v, k, i) in infoDic">{{ i }}-{{ k }}:{{ v }}</div>
<hr>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'easy come easy go',
infoDic: {
name: 'bigb',
age: '18',
gender: 'male'
},
}
})
</script>
</body>
</html>
分隔符
- delimiters属性, 用来修改差值表达式的符号, 以解决语法冲突问题, 比如Django的模板语法:
{{ }}和Vue的查找表达式符号:{{ }} delimiters: [ "[{" "}]" ]就是将Vue的差值表达式符号变成了[{ }]
<body>
<div id="d1">
<p>{{ msg }}</p>
<p>[{ msg }]</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
msg: 'easy come easy go',
},
// 将Vue的差值表达式符号变成 [{ }]
delimiters: [ '[{', '}]' ],
})
</script>
</body>
过滤器
- 在filter成员中定义过滤器方法
- 可以对多个值进行过滤，过滤时还可以额外传入辅助参数
- 过滤的结果可以再进行下一次过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="d1">
<p>{{ a|f1 }}</p>
<!--可以对多个值进行过滤, 也可以传辅助参数-->
<p>{{ a, b, c|f2(40)}}</p>
<!--可以对过滤的结果进行再过滤-->
<p>{{ a, b, c|f2(40)|f3}}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
a: 10,
b: 20,
c: 30,
},
filters: {
// 传入需要过滤的值, 返回过滤结果
f1(arg) {
return arg * 10
},
f2(arg1, arg2, arg3, arg4) {
return arg1 + arg2 + arg3 + arg4
},
f3(arg) {
return arg * arg
}
}
})
</script>
</body>
</html>
计算属性
- computed计算属性可以声明方法属性（方法属性一定不能在data中重复声明）
- 方法属性必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
- 绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会出发绑定方法，从而更新方法属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性</title>
</head>
<body>
<div id="d1">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<!--调用在computed中定义的result方法, 并渲染出返回值-->
<button>{{ result }}</button>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
n1: '',
n2: '',
},
computed: {
result() {
// 计算方法中出现的任何变量的值发生变化, 都会触发该方法
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2
}
}
})
</script>
</body>
</html>
监听属性
- 监听的属性需要在data中声明，监听方法不需要返回值
- 监听的方法名就是监听的属性名，该属性值发送更新是就会回调监听方法
- 监听方法有两个回调参数：当前变量值n，变量上一次值o
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听属性</title>
</head>
<body>
<div id="d1">
<p>姓名:<input type="text" v-model="fullName"></p>
<p>姓:<input type="text" v-model="lastName"></p>
<p>名:<input type="text" v-model="firstName"></p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
fullName: '',
firstName: '',
lastName: '',
},
watch: {
// 对fullName进行监听
fullName(n, o) {
// n表示变量的当前值, o表示变量的上一次的值
this.firstName = n.slice(1);
this.lastName = n.slice(0, 1);
}
}
})
</script>
</body>
</html>
day 68的更多相关文章
- P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解价格
NXP恩智浦P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解 NXP LPC700系列单片机解密型号: P87LPC759.P87LPC760.P87LPC761. ...
- Matlab的68个小常识
1.det(A)可以计算矩阵A的行列式值.inv(A)可以计算矩阵A的逆 2.rref(A)可以将矩阵A化为行简化阶梯梯形矩阵 3.eps是系统定义的容许误差,eps=2.2204*10-16 4.p ...
- Scala 深入浅出实战经典 第68讲：Scala并发编程原生线程Actor、Cass Class下的消息传递和偏函数实战解析
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...
- 编写高质量JS代码的68个有效方法（十三）
No.61.不要阻塞I/O事件队列 Tips: 异步API使用回调函数来延缓处理代价高昂的操作以避免阻塞主应用程序 JavaScript并发的接收事件,但会使用一个事件队列按序地处理事件处理程序 在应 ...
- 编写高质量JS代码的68个有效方法（八）
[20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（七）
[20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（六）
[20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（四）
[20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（三）
[20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（二）
[20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
随机推荐
- 【Spring IoC】Spring Bean（三）
一.Spring Bean的定义 被称作 bean 的对象是构成应用程序的支柱也是由 Spring IoC 容器管理的.bean 是一个被实例化,组装,并通过 Spring IoC 容器所管理的对象. ...
- JDOJ 1789: 高精度A+B
JDOJ 1789: 高精度A+B JDOJ传送门 洛谷 P1601 A+B Problem(高精) 洛谷传送门 Description 已知两个整数A.B 求A+B Input 第一行为A 第二行为 ...
- LG1410 子序列 二分图判定
问题描述 LG1410 题解 如果\(i<j,a_j \le a_i\),那么他它们不能在一个上升序列中. 于是在\(i,j\)之间建边,看建出来的图是不是二分图即可. \(\mathrm{Co ...
- 了解html标签
<title></title> 1.网页标题 2.当我们收藏网页时,默认标题就是网页标题 3.seo(搜索引擎优化) <h1></h1>~<h6& ...
- cmd 批处理创建 IIS 站点
windows 创建站点命令 appcmd C:\Windows\System32\inetsrv\appcmd.exe SITE 虚拟站点的管理 APP 管理应用程序 VDIR 管理虚拟目录 APP ...
- ADB/Fastboot刷机
谷歌官方ADB/Fastboot等工具包下载地址(最新版/免.墙):WINDOWS :https://dl.google.com/android/repository/platform-tools-l ...
- oracle--sqlplus格式化输出
01,日期格式化输出 SQL> alter session set NLS_DATE_FORMAT='YYYY-MM-DD HH24:mi:ss'; SQL> select sysdate ...
- RHEL8/CentOS8的基础防火墙配置-用例
systemctl systemctl unmask firewalld #执行命令,即可实现取消服务的锁定 systemctl mask firewalld # 下次需要锁定该服务时执行 syste ...
- MySQL中的相关表操作
简单表操作 1.表操作之修改表 .修改表名 alter table 表名 rename 新表名 .增加字段 alter table 表名 add 新字段名 数据类型[相关约束性条件...], add ...
- CentOS7 Hadoop 安装（完全分布式）
一.hadoop集群安装模式 单机模式 直接解压,无需任何配置.主要用于测试代码.没有分布式文件系统. 伪分布式 完全分布式的一种形式,只是所有的进程都配置要一个节点上.有分布式文件系统,只不 ...