同样的,我们先来回顾一下昨天学习的内容:

1.利用v-once来组织双向绑定

2.filter{}过滤器的使用(详情请看上一章)

3.computed(计算属性),利用computed属性实现filters同样的效果

4.利用method{}来实现与computed和filters同样的效果

5.比较filters、computed、method的区别

6.利用v-bind{}属性绑定HTML自带属性;如class,style等

7.v-bind{}属性绑定HTML自带属性的三种写法------对象,数组,数组+对象

8.vue会自动为类似于 border-radius,transform等需要加浏览器前缀的属性自动加上前缀

好了,回顾完昨天所学习的东西,那么我们进入今天的进程:::::

我想js中的  show(),hide()属性,大家一定已经耳熟能详,没错,这两组属性在我们的开发中运用得很多很多,那么我们来看一下,在Vue中,我们如何实现这两组属性吗,上代码:

<div v-if="ok">Ok</div>
<div v-else>No</div>
//以上代码详解:
1.值得注意的是v-else必须要紧接在v-if后面才会生效。
2.意思很明显,如果v-if的值为ok,那么输出Ok;如果v-if的值不为ok 那么输出No
 
如果我们把上面的代码更加语义化的写出来,那么就会是这样:
 
<div v-if="ok"></div>
<div v-if="!ok"></div>
 
同时,还有另一种表象相同但本质不同的写法:
<div v-show="ok">Ok</div>
<div v-else>No</div>
 
v-show其实和v-if的效果是一样的,只不过v-show不会渲染dom,而仅仅是改变css中display的属性而已;所以如果,我们把v-show="ok"换成v-show="false"的话,浏览器只会将其隐藏而不会删除节点。
 
值得注意的是,在新版本中v-show这种写法不支持 complate和v-else。
 
重点:所以通过上面的介绍,就可以得出这样一个结论;即为
 
1.v-if需要渲染dom,因此在切换速度上会比v-show慢;
2.而v-show的dom需要预先加载,因此初次加载量比v-if大;
 
所以,如果需要频繁切换则采用v-show;如果需要提升整个页面的加载速度则采用v-if。
 
 
以上只是开胃菜,蔬菜沙拉?水果沙拉???无所谓了,下面我们进入正题:
 
v-for::
我们知道对于任何变成语言来说,数据集合的循环处理其实都是最常用的功能,那么我们来看看vue的基本写法:
 
<div id="example">
    <div v-for="item in items"> {{ message }} </div>
</div>
 
var example2 = new Vue({
    el:' #example ',
    data{
        items[
            { message : ' foo ' }
            { message : ' bar ' }
]
}
})
上面的输出结果为:
foo , bar ;
 
同样,我们也可以写成比较像js原生语法的方式:
<div id =" example ">
    <div v-for=" item of items "> {{message}} </div>
</div>
 
上面提到的是最基本的v-for语法
 
其实Vue中的v-for和PHP中的foreach没有太大的区别;代码如下:
 
foreach( $x as $index => $y ){}
 
这个里面 $index 和 $y为一个键值对。
 
如:
$x = array( 1,2,3,4,5 )
那么 $index 依次是 0 1 2 3 4
        $y依次是 1 2 3 4 5 
 
 
这种写法,我们在Vue里可以这样写:
var example2 = new Vue({
    el:'#example',
    data{
        parentMessage : ' parent ',
        items{
            [
                { message : ' zoo ' },
                { message : ' bar ' }
]
}
})
 
<div id = "example"> 
    <div v-for=" ( item, index ) in items ">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
    </div>
</div>
 
那么我猜测上面输出的结果应该是:
 

parent - 0 - zoo

parent - 1 - bar       
 
上面我们讲到了利用v-for来循环数组,那么我们同样还可以用v-for来循环对象,代码如下:
 
<div id= " example ">
    <div  v-for= " value in object ">
            {{ value }}
    </div>
</div>
 
new Vue({
    el: ' #example ',
    data {
        object : {
            FirstName : ' mc '
            LastName : ' mcc '
            Age : ' 20 '
}
}
})
 
以上将会输出 :
mc
mcc
20;;;;
 
一个疑问,如果说我们把上面代码中的 value替换为key,那么将会输出什么呢?
?????????????????????????????????????
 
毫无疑问,输出依然是不变的,至于为什么,后面将会提到。
 
可以看出Vue的写法简洁易懂,既可以循环集合,又可以内部属性,所以在用Vue的v-for循环的时候,要注意不要搞混了,完整循环代码如下:
<div id = "example">
    <div v-for = " ( index key value  )  in object">
    {{value}}.{{index}}:{{key}}
</div>
 
代码如上,输出的结果应该是:
 
0.FirstName:mc
1.LastName:mcc
2.Age:20
 
!!注: 在v-for属性当中,循环的第一个参数,也就是上面的index为 object中的 值
                                            循环的第二个参数,也就是上面的 key 为 object中的 键
                                                循环的第三个参数,也就是上面的value 为object中的 数组下标
 
 
 
那么某些时候,我们只需要循环次数而不需要循环数据,也就是空数据,那么我们可以这样。。。
 
 
<div v-for=" n in 10 "> {{ n }} </div>
那么打印出来的结果就应该是  ::    12345678910
 
 

今天我们就到这里,祝大家周末愉快,明天见~~~~~~

希望各位看官,可以留下自己的见解,希望可以向大家学习;

不管是有疑问、质疑等都可以留言发表,希望可以和大家一起讨论,共同进步

Vue学习之路---No.3(分享心得,欢迎批评指正)的更多相关文章

  1. vue学习之路 - 4.基本操作(下)

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

  2. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

  3. Vue学习之路---No.4(分享心得,欢迎批评指正)

    这里说声抱歉,周末因为有其他事,没有更新博客,那么我们今天继续上周5的说. 老规矩,先回顾一下上一次的重点: 1.利用V-if和v-else来提到show()和hide(),同时要记住,v-else一 ...

  4. JAVA学习之路与大家分享

    这是我四年以前总结的JAVA学习之路,希望对初学者或想从事JAVA开发的人有帮助. 本人是软件工程专业出身,先后学过C.C++.JAVA.VB.delphi等等开发语言以及网络相关管理技术.哎,好久不 ...

  5. Vue学习之路第一篇(学习准备)

    1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...

  6. Vue学习之路---No.2(分享心得,欢迎批评指正)

    昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2. ...

  7. Vue学习之路---No.6(分享心得,欢迎批评指正)

    我们还是先回顾一下上一次的重点: 1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理 2.当方法名带括号的时候,在方法中一定要传参:而不带括号的时候,vm会自动配置默认event 3.各类事 ...

  8. Vue学习之路---No.7(分享心得,欢迎批评指正)

    老规矩,先回顾一下上回的重点: 1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换:如果设置了value,那么将会切换valu ...

  9. Vue学习之路---No.1(分享心得,欢迎批评指正)

    首先为了打消大家对Vue.js存在的顾虑,先通过大家所熟知的JQ作为对比. 都知道JQ的语法相对简单.清楚.使用方便.功能齐全: 那么Vue.js呢,同样的,Vue.js与JQ在很多地方都是相同之处, ...

随机推荐

  1. CodeForces 959E Mahmoud and Ehab and the xor-MST (MST+找规律)

    <题目链接> 题目大意: 给定一个数n,代表有一个0~n-1的完全图,该图中所有边的边权为两端点的异或值,求这个图的MST的值. 解题分析: 数据较大,$10^{12}$个点的完全图,然后 ...

  2. 作业二 | Git的安装与使用

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址https://github.com/k ...

  3. css变量使用

    CSS中的变量给了我们诸多优点:方便.代码重用.更可靠的代码库和提升防错能力.(此句转) 变量虽好用,但是兼容是在不怎么样:点这里查看. 一.变量的声明 :root { --base-font-siz ...

  4. session 存到memcache里

    web服务器的php session都给memcached ,这样你不管分发器把 ip连接分给哪个web服务器都不会有问题了,配置方法很简单,就在php的配置文件内 增加一条语句就可以了,不过前提你需 ...

  5. 06-JDBC

    JDBC > JAVA Database Connectivity java 数据库连接 * 为什么会出现JDBC > SUN公司提供的一种数据库访问规则.规范, 由于数据库种类较多,并且 ...

  6. python学习:条件语句if、else

    条件语句: 1.if...else...; 2.if...elif...esle 举例: 1.if...else... “age_of_princal = 56   guess_age = int(i ...

  7. Linux下的文件切割和文件合并

    linux下文件分割可以通过split命令来实现,可以指定按行数分割和按大小分割两种模式.Linux下文件合并可以通过cat命令来实现. 在Linux下用split进行文件分割: ①:指定分割后文件行 ...

  8. Vue使用中常见问题

    1.安装sass时报未找到 1.原因应该同时安装:1.npm install --save-dev sass-loader    2.npm install --save-dev node-sass ...

  9. ie下js不执行的几种可能

    1.首先考虑的就是代码是否有报错2.其次搜索代码中是否有console.log等测试的代码3.检查所用的方法是否兼容ie 以上是鄙人在开发过程中遇到的几种情况,抛砖来引玉~~

  10. [LeetCode] Similar RGB Color 相似的红绿蓝颜色

    In the following, every capital letter represents some hexadecimal digit from 0 to f. The red-green- ...