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 ...
随机推荐
- Java8——jdk——java.time包
public class TestLocalDateTime { //6.ZonedDate.ZonedTime.ZonedDateTime : 带时区的时间或日期 @Test public void ...
- Docker安装（二）
一.前提条件 目前,CentOS 仅发行版本中的内核支持 Docker. Docker 运行在 CentOS 7 上,要求系统为64位.系统内核版本为 3.10 以上. Docker 运行在 Cent ...
- LeetCode 113. Path Sum II路径总和 II (C++)
题目: Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the give ...
- css样式添加错误导致烦扰
省厅和市州 两个ul 之间切换 分别能显示两者对应的内容 但是在做过程中,出现省厅界面有市州的内容… 找了半天,发现是css的问题 layui-show的多添加 算是把首页内容的任务解决了至于c ...
- MyEclipse一直building workspace
点击Project,点击Bulid Automatically去掉其前面的勾,即取消自动编译工作空间中的所有java文件. 注:不要取消!!!!取消之后如果你修改的java文件和struts.xml等 ...
- 7.16 NOIP模拟测试4 礼物+通讯+奇袭
T1 礼物 题目大意:n个物品,每次有pi的概率买到,可以重复买,也可以什么都没买到,但算一次购买,问把所有东西都买到的期望次数.对于10%的数据,N = 1;对于30%的数据,N ≤ 5;对于100 ...
- MySQL实战45讲学习笔记：第二十二讲
一.引子 不知道你在实际运维过程中有没有碰到这样的情景:业务高峰期,生产环境的 MySQL 压力太大,没法正常响应,需要短期内.临时性地提升一些性能. 我以前做业务护航的时候,就偶尔会碰上这种场景.用 ...
- oracle--delete truncate drop的区别
一.delete 1.delete是DML,执行delete操作时,每次从表中删除一行,并且同时将该行的的删除操作记录在redo和undo表空间中以便进行回滚(rollback)和重做操作,但要注意表 ...
- 团队作业第五次—项目冲刺-Day2
Day2 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- Spring bean注入
1.构造方法注入 1.bean类 public class User { private String name; private Integer age; private Cat cat; publ ...