API：https://cn.vuejs.org/v2/api/#key

5、条件渲染

5.1 、 v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。也可以用 v-else 添加一个“else 块”==
实际例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <title>条件渲染</title>

</head>

<body>

<div id="app">

    <h1 v-if="myChoose">我是正确条件下显示的内容</h1>

    <h1 v-else>我是错误条件下显示的内容</h1>

</div>

<script type="text/javascript">

    var app = new Vue({

        el:"#app",

        data:{

            myChoose:true

        }

    })

</script>

</body>

</html>

启动服务器效果

5.2 、 v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <title>if_else_if</title>

</head>

<body style="background-color: pink">

<div id="app">

    <div v-if = "type === 'A'">我是A</div>

    <div v-else-if ="type === 'B'">我是B</div>

    <div v-else-if ="type === 'C'">我是C</div>

    <div v-else>我是其他</div>

</div>

<script type="text/javascript">

    var app = new Vue({

        el:"#app",

        data:{

            type:'A'

        }

    })

</script>

</body>

</html>



6 、列表渲染

我们可以用v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用item in items形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <title>列表渲染</title>

</head>

<body style="background-color: pink">

<div id="app">

    <ul>

        <li v-for="list in lists">

            {{list.message}}

        </li>

    </ul>

</div>

<script type="text/javascript">

    var app =new Vue({

        el:"#app",

        data:{

            lists:[

                {message:"北京"},

                {message:"上海"},

                {message:"河南"}

            ]

        }

    })

</script>

</body>

</html>

7 、事件监听

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <title>事件处理</title>

</head>

<body style="background-color: pink">

<div id="app">

    <button v-on:click="blue">Blue</button>

</div>

<script type="text/javascript">

    var app = new Vue({

        el:"#app",

        methods:{

            blue:function (event) {

                alert("触发了点击按钮事件")

            }

        }

    })

</script>

</body>

</html>

传递数值

<!DOCTYPE html>

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <title>事件处理</title>

</head>

<body style="background-color: pink">

<div id="app">

    <button v-on:click="blue">Blue</button>

</div>

<script type="text/javascript">

    var app = new Vue({

        el:"#app",

        data:{

            message:"Hello Vue"

        },

        methods:{

            blue:function (event) {

                alert(this.message)

            }

        }

    })

</script>

</body>

</html>

前端框架Vue------＞第一天学习（2） v-if的更多相关文章

  1. 前端框架Vue------＞第一天学习、Vue学习的路径、Vue官网（1）

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

  2. 前端框架Vue------＞第一天学习（3）

    文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...

  3. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  4. 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  5. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  6. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  7. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  8. 前端框架VUE——安装及初始化

    本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...

  9. 前端框架vue学习笔记：环境搭建

    兼容性 不兼容IE8以下 Vue Devtools 能够更好的对界面进行审查和调试 环境搭建 1.nodejs(新版本的集成了npm)[npm是node包管理 node package manager ...

随机推荐

  1. 程序思想中的冒泡法在python和1200PLC中scl高级编程中的应用

    冒泡排序:是计算机科学领域里面的一种算法. header 这个算法名字的由来是因为在执行算法的时候越小的元素会经由交换慢慢"浮"到数列的顶端(升序或降序排列),就如同碳酸饮料中二氧 ...

  2. MySQL为什么"错误"选择代价更大的索引

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 MySQL优化器索引选择迷思. 高鹏(八怪)对本文亦有贡献. 1. 问题描述 群 ...

  3. NC20471 [ZJOI2007]棋盘制作

    题目链接 题目 题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名. 据说国际象棋起源于易经的思想,棋盘是一个8*8大小的黑白相间的方阵,对应八八六十四卦,黑白对 ...

  4. Qt+ECharts开发笔记（四）：ECharts的饼图介绍、基础使用和Qt封装百分比图Demo

    前言   前一篇介绍了横向柱图图.本篇将介绍基础饼图使用,并将其封装一层Qt.  本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口.   Demo演示 ...

  5. Word 脚注和尾注是什么？怎么设置？

    描述 脚注一般位于页面的底部,作为文档某处内容的注释.尾注一般位于文档的末尾,列出引文的出处等. 设置脚注和尾注 将光标移动到要插入脚注或尾注的地方,然后点击"引用"选项卡. 左边 ...

  6. virsh edit 很慢 的bug

    创建虚拟机,发现virsh edit很慢. strace的结果: 09:26:03 close(10) = -1 EBADF (Bad file descriptor)09:26:03 close(1 ...

  7. 【Azure Spring Cloud】Azure Spring Cloud服务，如何获取应用程序日志文件呢？

    问题描述 在使用Azure Spring Cloud服务时,如果要收集应用程序的日志.有控制台输出(实时流日志),也可以配置Log Analytics服务. 日志流式处理 可以通过以下命令在 Azur ...

  8. BUUCTF Misc 被偷走的文件

    首先下载文件打开 得到一个流量文件 用wireshark打开 打开后 进行分析 看到有ftp流量,于是过滤ftp 看到被偷走的是flag.rar 接下用binwalk进行分离 binwalk -e f ...

  9. .NET 部署Https（SSL）通过代码方式

    在上一个文章中,传送门,给大家介绍了怎么在配置文件中使用 Kestrel 部署 Https,正好今天有小伙伴稳问到:可以通过代码的方式实现 Kestrel 的 Https 的部署吗?答案是肯定的,我们 ...

  10. 使用Docker方式部署Gitlab,Gitlab-Runner并使用Gitlab提供的CI/CD功能自动化构建SpringBoot项目

    1.Docker安装Gitlab,地址:https://www.cnblogs.com/sanduzxcvbnm/p/13814730.html 2.Docker安装Gitlab-runner,地址: ...