1.v-for

  遍历数据渲染页面是非常常用的需求,Vue中通过v-for指令来实现。

  1>遍历一个users数组

<!--  ve-for  -->
<ul>
<li v-for="(value,key) in users">
{{key}}-{{value.name+","+value.gender+","+value.age}}
</li>
</ul>

 

  2>遍历数组中的一个对象 要比遍历数组多一个属性 I

<!--遍历对象比遍历数组 多一个key-->
<ul>
<li v-for="(value,key,i) in users[0]">
{{i+":"+key+"-"+value}}
</li>
</ul>

  3>遍历数字

<!--遍历数字-->
<ul>
<li v-for="i in 5">
{{i}}
</li>
</ul>

2.v-if,v-else和v-show

  1>.v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。

  v-if和v-show的区别

<!-- v-if -->
<button v-on:click="show = !show">点击切换</button><br/>
<!-- v-if 直接删除该标签 -->
<h1 v-if="show">
你好
</h1>
<!-- v-show 只是修改 display:none的属性值 -->
<h1 v-show="show">
你好
</h1>

  2>v-if,v-else和v-for的混合使用

  <ul>
<li v-for="i in 5" v-if="i%2===0">
{{i}}
</li>
</ul>
<ul>
<li v-for="i in 5" >
<span v-if="i%2===0">{{i}}是:偶数</span>
<span v-else>{{i}}是:奇数</span>
</li>
</ul>

以上案例<script>中的代码

<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",//element
data: {
users: [
{name: '1', gender: '女', age: 21},
{name: '2', gender: '男', age: 30},
{name: '3', gender: '女', age: 24},
{name: '4', gender: '女', age: 18},
{name: '5', gender: '女', age: 25}
],
show:true
},
methods: {},
}); </script>

3.v-bind

  假如我们想动态的修改页面元素的属性,比如class属性,这样写是错误的:

<div class="{{isAcctive}}"></div>

  因为插值表达式不能用在属性的值中。

  Vue对class属性进行了特殊处理,可以接收数组或对象格式:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div #box, #box1 {
width: 100px;
height: 100px;
color: chartreuse;
} .red {
background-color: red;
} .blue {
background-color: blue;
} </style> </head>
<body>
<!-- v-bind 把html的属性变成vue的特有属性 缩写 v-bind= : -->
<div id="app">
<input type="button" v-on:click="color='red'" value="红色">
<input type="button" v-on:click="color='blue'" value="蓝色">
<div id="box" v-bind:class="color">我是盒子</div> <input type="button" v-on:click="isRed=!isRed" value="点我切换颜色">
<div id="box1" v-bind:class="{red:isRed,blue:!isRed}">我是盒子</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element,vu作用的标签
data: {
color: "red",
isRed: true,
},
},
methods: {},
}); </script>
</body>
</html>

4.计算属性

在插值表达式中使用js表达式是非常方便的,而且也经常被用到。

但是如果表达式的内容很长,就会显得不够优雅,而且后期维护起来也不方便,例如下面的场景,我们有一个日期的数据,但是是毫秒值:

转化成日期格式

data:{
birthday:1529032123201 // 毫秒值
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--计算属性-->
<h1>
<!-- 计算属性 是属性不是函数 不需要加括号-->
您的生日:{{brith}}
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element,vu作用的标签
data: {
},
methods: {},
computed: {
brith: function () { // 计算属性本质是一个方法,但是必须返回结果
const day = new Date(this.birthday)
return day.getFullYear() + "年" + day.getMonth() + "月" + day.getDay() + "日"
}
},
}); </script>
</body>
</html>

5.watch

watch可以让我们监控一个值的变化。从而做出相应的反应。就是当我们监控的值发生改变时,执行相应的方法

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<body>
<div id="app"> </div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //element,vu作用的标签
data: {
color: "red",
isRed: true,
birthday: 1429032123201, // 毫秒值
num: 1,
person: {
name: "hdh",
age: 20,
},
},
methods: {}, computed: {
},
watch: {
/*浅度监控 当num属性发生改变时打印改变前和改变后的值*/
num: function (val, valOld) {
console.log(val, valOld) },
/*深度监控 对数组中的属相进行监控*/
firstName:function () {
deep:true,
handler(val)
console.log(val.age)
},
},
}); </script>
</body>
</html>

TZ_16_Vue的v-for、v-if、v-show、v-bind、watch的更多相关文章

  1. SIP模块版本错误问题:the sip module implements API v??? but XXX module requires API v???

    系统安装了python 2.7,继续安装PyQt4,于是依次下载sip.pyqt4源码进行安装.用以下代码测试: import PyQt4.QtGui 显示出错.错误信息:the sip module ...

  2. n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关

    如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...

  3. XV Open Cup named after E.V. Pankratiev. GP of Tatarstan

    A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...

  4. XVII Open Cup named after E.V. Pankratiev. GP of SPb

    A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...

  5. XVI Open Cup named after E.V. Pankratiev. GP of Ukraine

    A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...

  6. XVI Open Cup named after E.V. Pankratiev. GP of Peterhof

    A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...

  7. XVI Open Cup named after E.V. Pankratiev. GP of Siberia

    A. Passage 枚举两个点,看看删掉之后剩下的图是否是二分图. #include <bits/stdc++.h> using namespace std ; const int MA ...

  8. XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg

    A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...

  9. XVI Open Cup named after E.V. Pankratiev. GP of Eurasia

    A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...

  10. XVI Open Cup named after E.V. Pankratiev. GP of SPB

    A. Bubbles 枚举两个点,求出垂直平分线与$x$轴的交点,答案=交点数+1. 时间复杂度$O(n^2\log n)$. #include<cstdio> #include<a ...

随机推荐

  1. linux常用软连接使用ln -s

    [软连接]另外一种连接称之为符号连接(Symbolic Link),也叫软连接.软链接文件有类似于Windows的快捷方式.它实际上是一个特殊的文件.在符号连接中,文件实际上是一个文本文件,其中包含的 ...

  2. Caffe系列2——Windows10制作LMDB数据详细过程(手把手教你制作LMDB)

    Windows10制作LMDB详细教程 原创不易,转载请注明出处:https://www.cnblogs.com/xiaoboge/p/10678658.html 摘要: 当我们在使用Caffe做深度 ...

  3. MATLAB 去掉数组里面不要的元素

    trainfinger=1 testingfinger=(1:8); testingfinger = testingfinger(~ismember(testingfinger,trainfinger ...

  4. 【树剖】CF916E Jamie and Tree

    好吧这其实应该不是树剖... 因为只要求子树就够了,dfs就好了 大概就是记录一个全局根root 多画几幅图会发现修改时x,y以root为根时的lca为以1为根时的lca(x,y),lca(root, ...

  5. C++ 系列:C++ 内存布局

    1 前言 了解你所使用的编程语言究竟是如何实现的,对于C++程序员可能特别有意义.首先,它可以去除我们对于所使用语言的神秘感,使我们不至于对于编译器干的活感到完全不可思议:尤其重要的是,它使我们在De ...

  6. Powerdesigner 生成数据字典

    https://www.jianshu.com/p/f491d0d3c503http://blog.csdn.net/adparking/article/details/50402980http:// ...

  7. 使用node.js实现反向代理

    一. 反向代理的应用场景 1. 静态资源与动态资源分离 e.g. 图片服务器 2. AJAX跨域访问 3. 搭建统一服务网关接口 二. 使用node.js实现反向代理 1. 安装http-proxy模 ...

  8. 深入浅出 Java Concurrency (35): 线程池 part 8 线程池的实现及原理 (3)[转]

    线程池任务执行结果 这一节来探讨下线程池中任务执行的结果以及如何阻塞线程.取消任务等等. 1 package info.imxylz.study.concurrency.future;2 3 publ ...

  9. 杂项-公司:Facebook

    ylbtech-杂项-公司:Facebook Facebook(脸书)是美国的一个社交网络服务网站 ,创立于2004年2月4日,总部位于美国加利福尼亚州帕拉阿图,2012年3月6日发布Windows版 ...

  10. 让ASPX页面可以提交html标签代码的配置

    1:打开web.config文件,在system.web节点里,添加<httpRuntime requestValidationMode="2.0" /> 2:在asp ...