条件选择

条件选择的用法和其他语言类似，一个例子就能解决所有问题

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <script src="https://unpkg.com/vue"></script>
  7. </head>
  8. <body>
  9.     <div id="app-1">
  10.         <div v-if="number > 90">
  11.             {{ number }}分，牛逼
  12.         </div>
  13.         <div v-else-if="number > 60">
  14.             {{ number }}分，还行吧
  15.         </div>
  16.         <div v-else-if="number > 20">
  17.             {{ number }}分，要努力了
  18.         </div>
  19.         <div v-else>
  20.             {{ number }}分，废了
  21.         </div>
  22.     </div>
  23.     <script type="text/javascript">
  24.         var vm1 = new Vue({
  25.             el: '#app-1',
  26.             data: {
  27.                 number: Math.round(Math.random() * 100)  //随机0到100的整数
  28.             }
  29.         })
  30.     </script>
  31. </body>
  32. </html>

随机出一个分数，将值赋给number，通过对number值的判断显示符合条件的内容

v-if与v-show

  1. <div id="app-2">
  2.     <span v-if="isVisible">Hello, TanSea!</span>
  3.     <span v-show="isVisible">Hello, TanSea!</span>
  4. </div>
  5. <script type="text/javascript">
  6.     var vm2 = new Vue({
  7.         el: '#app-2',
  8.         data: {
  9.             isVisible: false
  10.         }
  11.     })
  12. </script>

v-if与v-show在用法上是一样的，最终展示出来的结果也是一样的，区别在于

v-if：真实的条件渲染，在条件为假时什么也不做，有更高的切换消耗，适应于不怎么切换的场景

v-show：始终被编译并保留，只是简单的用CSS做切换，有更高的初始渲染消耗，适应于频繁切换的场景

Vue.js学习笔记 第三篇 条件渲染的更多相关文章

  1. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  2. Vue学习笔记（三）条件渲染和循环渲染

    目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...

  3. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  4. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  5. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  6. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  7. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

随机推荐

  1. POJ3694-Network(Tarjan缩点+LCA)

    题目链接 题意:给你一个连通图.然后再给你n个询问,每一个询问给一个点u,v表示加上u,v之后又多少个桥. 思路:用Tarjan缩点后,形成一棵树,所以树边都是桥了.然后增加边以后,查询LCA,LCA ...

  2. android中TabHost和RadioGroup

    android底部菜单应用 博客分类: android--UI示例 TabHostMenuRadioGroupButton  在android中实现菜单功能有多种方法. Options Menu:用户 ...

  3. ChemDraw能够生成化学性质报告吗

    ChemDraw破解版是一种不安全的软件版本,危害用户信息安全,一些不法分子正是因利用用户寻求免费软件的心理以ChemDraw破解版.ChemDraw注册机为噱头传播不安全信息.如果使用者已经成功安装 ...

  4. windown安装bloomFilter

    个人博客:https://blog.sharedata.info/ 最近在研究python爬虫,需要在windown中安装bloomFilter来处理网页的去重问题,在window中安装python然 ...

  5. 通过w3c方式 读取xml内容

    /** * 通过w3c方式 读取xml内容 * @param lablenames 要读取的节点名称 * @param file_path_name 文件绝对路径 * @return */ publi ...

  6. 图片上传JS插件梳理与学习

    项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...

  7. IDEA错误的将所有代码文件都加入版本控制

    1.问题: IDEA将从Git上拉取的所有代码文件都加入版本控制里,而这些文件和远程服务器没有任何区别: 2.原因: 后来发现,虽然项目使用的是Git的版本控制,但是异常模块都是使用SVN的版本控制: ...

  8. GridView中给DropDownList动态绑定数据，及选择列表值后自动更新数据库

    protected void sgvFile1_RowDataBound(object sender, GridViewRowEventArgs e) { DropDownList ddlAM = ( ...

  9. 相似度模型 similarity model

    Lucene4.0附加了相似度模型,允许在文档中使用不同的公式.

  10. HTP 302 SEO作弊

    w 李智慧