表单指令

  • 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-showv-show的渲染方式更多。v-if能够保证不渲染的数据泄露,安全性高

  • v-if|v-else-if|v-else

v-if条件不成立时会运行v-else-if,只有v-ifv-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|obj
  • v-for="(v, i ) in string|array
  • v-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的更多相关文章

  1. P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解价格

    NXP恩智浦P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解 NXP LPC700系列单片机解密型号: P87LPC759.P87LPC760.P87LPC761. ...

  2. Matlab的68个小常识

    1.det(A)可以计算矩阵A的行列式值.inv(A)可以计算矩阵A的逆 2.rref(A)可以将矩阵A化为行简化阶梯梯形矩阵 3.eps是系统定义的容许误差,eps=2.2204*10-16 4.p ...

  3. Scala 深入浅出实战经典 第68讲:Scala并发编程原生线程Actor、Cass Class下的消息传递和偏函数实战解析

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  4. 编写高质量JS代码的68个有效方法(十三)

    No.61.不要阻塞I/O事件队列 Tips: 异步API使用回调函数来延缓处理代价高昂的操作以避免阻塞主应用程序 JavaScript并发的接收事件,但会使用一个事件队列按序地处理事件处理程序 在应 ...

  5. 编写高质量JS代码的68个有效方法(八)

    [20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  6. 编写高质量JS代码的68个有效方法(七)

    [20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  7. 编写高质量JS代码的68个有效方法(六)

    [20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  8. 编写高质量JS代码的68个有效方法(四)

    [20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  9. 编写高质量JS代码的68个有效方法(三)

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  10. 编写高质量JS代码的68个有效方法(二)

    [20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

随机推荐

  1. Location配置与ReWrite语法(五)

    原文链接:https://www.cnblogs.com/crazylqy/p/6892010.html location表示uri方式定位,基础语法有三种: location = pattern { ...

  2. Redis面试题(46题)

    1.什么是Redis?简述它的优缺点? Redis 的全称是:Remote Dictionary.Server,本质上是一个 Key-Value 类型的内存数据库,很像memcached,整个数据库统 ...

  3. oracle--10.2.0.3升级到11.2.0.4

    一,环境 01,待升级的系统 升级仅支持10.2.0.2版本之后的系统,如果不是,请把10G升级至高版本! 本次实验环境10.2.0.3 02,挂载11G系统 03,升级须知 1) 做好备份 二,DB ...

  4. oracle --工具 ODU

    一,什么是ODU ODU全称为Oracle Data ba se Unloader ,是用于Oracle 数据库紧急恢复的软件,在各种原因 造成的数据库不能打开或数据删除后没有备份时,使用ODU抢救数 ...

  5. prometheus consul docker redis_exporter 自动注册配置

    0.启动redis_exporter redis_exporter: version: '2'services: redis_exporter: image: oliver006/redis_expo ...

  6. 【2019年07月22日】A股最便宜的股票

    查看更多A股最便宜的股票:androidinvest.com/CNValueTop/ 便宜指数 = PE + PB + 股息 + ROE,四因子等权,数值越大代表越低估. 本策略只是根据最新的数据来选 ...

  7. Prometheus 安装Alertmanager集成

    Prometheus 安装Alertmanager集成 # 下载地址 地址1:https://prometheus.io/download/ 地址2:https://github.com/promet ...

  8. 源码分析-----ThreadPoolExecutor

    创建一个线程池: import time from concurrent.futures import ProcessPoolExecutor, as_completed def get_html(n ...

  9. Problem 1059 老师的苦恼

    Bob写文章时喜欢将英文字母的大小写混用,例如Computer Science经常被他写成coMpUtEr scIeNce,这让他的英文老师十分苦恼,现在请你帮Bob的英文老师写一个程序能够将Bob的 ...

  10. java8 Lambda 表达式和函数式接口快速理解

    前言 接上篇文章 java8 新特性 由于上篇过于庞大,使得重点不够清晰,本篇单独拿出 java8 的 Lambda 表达式和函数式接口说明. Lambda 表达式 lambda 表达式其实就是使用了 ...