Vue之条件渲染
时间:2021-09-03
本文章向大家介绍Vue之条件渲染,主要包括Vue之条件渲染使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>条件渲染</title> 9 </head> 10 11 <body> 12 <div id="div"> 13 <!-- 判断num的值对3取余,余数为0显示div1,余数是1显示div2,余数为2显示div3 --> 14 <div v-if="num % 3 == 0">div1</div> 15 <div v-else-if="num % 3 == 1">div2</div> 16 <div v-else="num % 3 == 2">div3</div> 17 18 <div v-show="flag">div4</div> 19 </div> 20 </body> 21 <script src="../js/vue.js"></script> 22 <script> 23 new Vue({ 24 25 el: "#div", 26 data: { 27 num: 1, 28 flag: true 29 } 30 }); 31 </script> 32 33 </html>
世界不会因为你的疲惫,而停下它的脚步
原文地址:https://www.cnblogs.com/dss-99/p/15224874.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法