vue学习笔记

转载 2018年04月17日 10:01:43

一 : v-if

  1. 作用 : 判断是否加载固定的内容,如果为真,就加载,否则不加载
  2. 用处 : 用在权限管理,页面加载
  3. 语法 : v-if="判断表达式"
  4. 特点 : 控制元素插入或删除,而不是隐藏(v-show是隐藏)
  5. v-if与v-show的区别 :
  • v-if的安全级别更高,v-show只是隐藏了,通过页面源代码还是可以看到,安全级别低、
  • v-if更高的切换消耗(切换消耗指从未加载到加载或者从加载到未加载的状况,需要添加或删除这个元素),v-show需要更高的初始化渲染消耗
  • 因此如果需要频繁切换而对安性无要求,使用v-show;如果运行时,条件不能改变,使用v-if
6.v-if和v-for的区别 : 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
举个栗子1
<div id="app">
    <h1 v-if="status == 'ok' ">yes</h1>
    <h1 v-else>no</h1>
</div>
var app = new Vue({
    el : '#app',
    data : {
        status : 'ok'
    }
});

运行结果 :app.status = 'ok' 则显示yes,status=任何其他的值都显示no
栗子2 : 一个条件渲染多条语句

<template v-if="status == 'ok'">
    <h1>title</h1>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
</template>

运行结果 : 条件成立时,这三条语句同时显示在页面上

 title
 paragraph 1
 paragraph 2

拓展一点:
template用于包裹纯文字或者没有大的父级元素包裹的情况下,比如一段文字需要加载,而没有别的元素包裹它,就可以用template来包裹

栗子3

<div id="app4">
    <p v-if="seen">v-if根据条件显示与隐藏</p>
</div>
var app4 = new Vue({
    el : '#app4',
    data : {
        seen : true
    }
})

运行结果 :

从上述动图我们可以看到 : v-if如果判断不成立,就不会在DOM中渲染,也不会将对应的语句显示在页面上

二 :v-else

v-else要紧跟在v-if后面,表示v-if条件不成立时执行

三 : v-else-if

表示多次,在v-if和v-else中间
栗子4

<div id="app5">
    <div v-if="status == 'loading'"> 
        <div style="background-color:blue">loading</div>
    </div>

    <div v-else-if="status === 'success'">
        <div style="background-color:green">success</div>
    </div>

    <div v-else="status == 'fail'">
        <div style='background-color:red'>fail</div>
    </div>
</div>
var app5 = new Vue({
    el : '#app5',
    data : {
        status : 'loading'
    }
})

运行结果 :


小礼物走一走,来简书关注我



作者:椰果粒
链接:https://www.jianshu.com/p/8ecde5953465
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

VUE学习笔记

  • 2017年07月17日 00:50
  • 847KB
  • 下载

vue学习笔记四

Vue学习笔记四 vue学习笔记一  vue学习笔记二 vue学习笔记三 今天写个todolist, 在前几篇的基础上做的。需要的同学可以点击上面的链接; 在template文件夹下...
  • hbnight
  • hbnight
  • 2017-05-03 08:34:47
  • 317

整理vue学习笔记

1.vue简介,vue是一个构建用户界面的框架。是一个轻量级mvv框架,和angular一样是所谓的双向数据绑定,数据驱动和组件化的前端开发,通过简单的api 实现响应式的数据绑定和组合试图组件,容易...
  • qq_26562641
  • qq_26562641
  • 2017-09-04 09:20:44
  • 962

Vue2.0学习笔记

模板语法https://juejin.im/user/580327ee0e3dd900570cf3ab 1.文本 数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-26 22:46:10
  • 1033

某课稀缺资源 vue高仿饿了么app

  • 2017年12月29日 10:05
  • 49B
  • 下载

VUE 学习笔记 从零开始一步一步构建 VUE 单页应用(四)

在前面的文章中我们把一个简单的单页应用搭建起来了,现在我们就来给它加点料。...
  • zgh0711
  • zgh0711
  • 2017-09-27 17:53:26
  • 159

Vue学习笔记

Vue2.0和1.0的一些语法差别(一)数据绑定语法 只处理单次插值,今后的数据变化就不会再引起插值更新 1.0的写法:This will never change: {{* msg }} 2.0...
  • sinat_31250617
  • sinat_31250617
  • 2016-10-02 17:20:06
  • 526

vue小白学习笔记0--购物车

第一个实战:写一个购物车实例 为了从零开始学习,vue.js文件是用引入的。 用两个v-for实现两个商品组 html div id="app" v-cloak> tem...
  • xuqipeter
  • xuqipeter
  • 2018-01-27 12:58:43
  • 52

VUE整理(三)

  • 2017年12月05日 17:17
  • 21KB
  • 下载

vue.min.js

  • 2018年01月13日 18:51
  • 84KB
  • 下载
收藏助手
不良信息举报
您举报文章:vue学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)