Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录
案例讲解:
# 有一个200x200矩形框wrap,点击wrap本身,记录点击次数,如果是1次wrap为pink色,2次wrap为green色,3次wrap为cyan色,4次重新回到pink色,依次类推
<div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>
methods: {
actionFn() {
this.count ++;
this.bgColor = this.colorArr[this.count % 3]
// 0 % 3 余 0
// 1 % 3 余 1 ....
}
}
一. 表单指令
1.重点:
<!--v-model='变量' 可以完成双向绑定-->
<!--变量值与表单标签的value相关-->
<input type="text" name="user" placeholder="输入账号" v-model="v1">
<input type="text" name="password" placeholder="输入密码" v-model="v1">
<!--v-model绑定的变量值可以影响到表单标签的值 反过来表单标签的值也可以影响变量的值-->
补充
<!--数字之间的加减 例如字符串和num 可以在字符串前加上+即可转换成num-->
2.单选框
男:<input type="radio" name="sex" value="male" v-model="v2">
女:<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }} <!--v2的值是单选框的value-->
3.单一复选框
是否同意:同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }} <!--v3拿到的是布尔值 -->
4.多复选框
爱好:<br>
男:<input type="checkbox" name="hobbies" value="male" v-model="v4">
女:<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞:<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }} <!--拿到的是一个数组 [ "male", "female" ] -->
<!--但是你必须给个数组-->
data: {
v1: '123', // v-model
v2: 'male', // 单选框
v3: false, // 单一复选框
v4: ['male', 'female'] // 复选框
}
二 . 条件指令
v-if/v-show ...
v-show
='布尔值' v-if
='布尔值'
v-if | v-else-if | v-else
v-show
和 v-if
之间的区别:
// v-show='布尔值' 隐藏时:采用display:none进行渲染
// v-if='布尔值' 隐藏时:不在页面中渲染(保证不渲染的数据泄露)
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
<!--不成立就不会渲染!!-->
v-clock
# 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
js
不变,在 div
中加入 v-cloak
指令
<div id="app" v-cloak>
{{context}}
</div>
[v-cloak]{
display: none;
}
三 . 循环指令
<!--循环指令:v-for="ele in string|array|obj" -->
string
<i v-for="c in string">{{ c }} </i> <!--string 现在为字符串 我们可以直接拿到 {{ c }}-->
<i v-for="(c, i) in string">{{i}}:{{c}</i> <!--c 为值 i 为索引-->
arrag
<div v-for="e in arrag">{{ e }}</div>
<div v-for="(e, i) in arrag">{{ i }}:{{ e }}</div> <!--e 为值 i 为索引-->
obj
<div v-for="v in obj">{{ v }}</div> <!--v 为值-->
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<!--v 为值--> <!--k 为键--> <!--i 为索引-->
<!--v-for中需要给循环的组件或者标签中建立 :key= 完成缓存的建立-->
循环指令案例(splice):
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
// 将comment添加到msgs数组中:unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment);
// 数组操作最全方法:splice(begin_index, count, ...args)
// 从第0位开始 操作2位 操作内容为 args
// this.msgs.splice(0, 2);
if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
四 . localstorage and sessionstorage
// 前台数据库
// localStorage: 永久存储
// sessionStorage:临时存储(所属页面标签被关闭后,清空)
// 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20;
// 取
// localStorage.n1
// sessionStorage.n2
// 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// JSON.parse(localStorage.arr)
// 清空数据库
// localStorage.clear();
五.分隔符(了解)
delimiters: ['[{', '}]'], // 修改插值表达式符号
<div id="app">
{{ msg }}
[{ msg }] <!--修改过后的-->
</div>
六.过滤器
1.在filters成员中定义过滤器方法
<p>{{ num | f1 }}</p>
filters:{
// 传入所有要过滤的条件,返回值就是过滤的结果
f1 (num) {
return num * 10;
},
}
2.可以对多个值进行过滤,过滤时还可以额外传入辅助参数
<p>{{num , num2 | f2 }}</p>
filters:{
// 传入所有要过滤的条件,返回值就是过滤的结果
f2(num, num2){ // 接受两个参数
return num * num2
},
}
3.过滤的结果可以进行下一次过滤(过滤的串联)
<p>{{ num , num2 | f2 | f3 }}</p>
filters:{
f3(num){
return num * 3
},
}
7.计算属性
1、computed计算属性可以声明 方法属性(方法属性一定不能在data中重复声明)
2、方法属性 必须在页面中渲染,才会启用绑定的方法,方法属性的值就是绑定方法的返回值
3、绑定的方法中出现的所有变量都会被监听,任何一个变化发生值更新都会重新出发绑定方法,从而更新方法属性的值
案例:
<input type="text" value="" v-model="v1">
<input type="text" value="" v-model="v2">
<p>{{ result }}</p>
computed:{
result(){
this.v1;
this.v2;
return +this.v1 + +this.v2;
}
}
一般用来解决的问题:一个变量值依赖于多个变量
8.监听属性
1、监听的属性需要在data中声明,监听方法不需要返回值
2、监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
3、监听方法有两个回调参数:当前值,上一次值
案例:
<p>姓名:<input type="text" v-model="full_name"></p>
<p>姓:{{ first_name }}</p>
<p>名:{{ last_name }}</p>
data:{s
full_name:'',
first_name:'',
last_name:''
},
watch:{
full_name(n,i){
console.log(n, i);
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
}
}
解决的问题:多个变量值依赖于一个变量值
Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性的更多相关文章
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 简单vue的监听属性(单位换算)
单位换算 单位换算可以根据实际情况换 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- Vue-指令补充、过滤器、计数器属性、监听属性
vue实例成员: el | template |data | methods watch 监听事件| computed 计数属性使用 | filters过滤器 | props 父传子 componen ...
- Vue 变量,成员,属性监听
Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
- Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
随机推荐
- 初探three.js
相信大多数选择前端的小伙伴都有一个设计师的梦,今天我来说一说three.js.three.js是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.学习了 ...
- 串烧 JavaCAS相关知识
JMM与问题引入 为啥先说JMM,因为CAS的实现类中维护的变量都被volatile修饰, 这个volatile 是遵循JMM规范(不是百分百遵循,下文会说)实现的保证多线程并发访问某个变量实现线程安 ...
- Java常用类、接口关系图谱
呕心沥血画出此图,希望在使用Java类.接口时捋顺其关系,从而更好的组织程序逻辑---请看图 Object分出来的类都是其子类 Iterable接口分出的也是子接口 从继承关系分析,其父类实现的接口子 ...
- 新闻实时分析系统-HBase分布式集群部署与设计
HBase是一个高可靠.高性能.面向列.可伸缩的分布式存储系统,利用Hbase技术可在廉价PC Server上搭建 大规模结构化存储集群. HBase 是Google Bigtable 的开源实现,与 ...
- Java程序在内存中运行详解
目录 Java程序在内存中运行详解 一.JVM的内存分布 二.程序执行的过程 三.只有一个对象时的内存图 四.两个对象使用同一个方法的内存图 五.两个引用指向同一个对象的内存图 六.使用对象类型作为方 ...
- 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session
本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享) 1. 离线缓存(xxx.manifest) H5处理离线缓存还是存在一些硬伤的,所以真实项 ...
- 4.Netty执行IO事件和非IO任务
回顾NioEventLoop的run方法流程 IO事件与非IO任务 处理IO事件 处理非IO任务 聚合定时任务到普通任务队列 从普通队列中获取任务 计算任务执行的超时时间 安全执行 计算是否超时 总结 ...
- sed 使用介绍
第6周第4次课(4月26日) 课程内容: 9.4/9.5 sed 9.4/9.5 sed 操作实例如下 sed和grep比较起来,sed也可以实现grep的功能,但是没有颜色显示,sed强项是替换一些 ...
- Linux基础命令小技巧
总结 CentOS(Community Enterprise Operating System,中文意思是:社区企业操作系统)是Linux发行版之一,它是来自于Red Hat Enterprise L ...
- 基于Quartz.NET框架的任务计划管理工具
最近接到一个小需求 ——可以定期同步20个Sql Server 7.0数据库里的数据(数据量会预计>10000),并保存为CSV格式文件 ——可以设置保存文件数据量 ——该应用需要用WinFor ...