vue数据渲染、条件判断及列表循环
1.数据渲染 {{msg}}
<template>
<div id="app">
{{msg}}
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'Hello World'
}
}
}
</script> <style> </style>
2.条件判断 v-if="XXX"
<template>
<div id="app">
{{msg}}
<hr>
<block v-if="state">
你看到我了
</block> </div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'Hello World',
state:true
}
}
}
</script> <style> </style>
3:列表循环 v-for="(item,index) in list" :key="index"
<template>
<div id="app">
{{msg}}
<hr>
<block v-if="state">
你看到我了
</block>
<hr/>
<ol>
<li v-for="(item,index) in list" :key="index">
{{item.text}}
</li>
</ol>
</div>
</template> <script>
export default {
name: "app",
data() {
return {
msg: "Hello World",
state: true,
list: [
{ text: "学习 JavaScript" },
{ text: "学习 Vue" },
{ text: "整个牛项目" }
]
};
}
};
</script> <style>
</style>
最终页面效果:
vue数据渲染、条件判断及列表循环的更多相关文章
- 前端笔记知识点整合之JavaScript(三)关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- 前端笔记之JavaScript(三)关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法 ...
- 解决vue数据渲染过程中的闪动问题
关键代码 主要解决vue双大括号{{}}在数据渲染和加载过程中的闪动问题,而影响客服体验. html代码: <span class="tableTitle selftab" ...
- Python条件判断 if-else for循环 while循环 break continue
条件判断 if-else if-else语句是通过if 后面的是否为真,当为True,就执行if代码块后面的,如果为False,同时又有else语句,执行else后面的内容.没有else,什么都不执行 ...
- Python基础 整形、布尔值、if条件判断、while循环、运算符、格式化输出
1,计算机基础.2,python历史. 宏观上:python2 与 python3 区别: python2 源码不标准,混乱,重复代码太多, python3 统一 标准,去除重复代码.3,python ...
- js 树结构数据遍历条件判断
代码: /** * 树结构数据条件过滤 * js 指定删除数组(树结构数据) */ function filter (data, id) { var newData = data.filter(x = ...
- day_05 if条件判断和while循环作业题
1. 输入姑娘的年龄后,进行以下判断: 1. 如果姑娘小于18岁,打印“不接受未成年” 2. 如果姑娘大于18岁小于25岁,打印“心动表白” 3. 如果姑娘大于25岁小于45岁,打印“阿姨好” 4. ...
- vue animate.css训练动画案例 列表循环
制作目标动画:向上入场添加数据,点击数据右滑动离场 简单页面效果: 实现代码如下: <!DOCTYPE html> <html> <head> <meta c ...
- 08 MySQL_SQL_DQL_select数据查询条件判断
导入*.sql数据到数据库 windows系统 source d:/tables.sql; Linux系统 source /home/soft/桌面/tables.sql; 导入完成后 测试查询 ...
随机推荐
- python web自动化测试框架搭建(功能&接口)——接口测试模块
Python接口测试采用python读取excel的方法,通过requests库发送请求和接收响应.模块有: Data:用于存放excel用例的,用例格式: iutil: 接口公共方法,数据引擎.ht ...
- SEC2- - mysql 的介绍
一.mysql的背景 前身属于瑞典的一家公司,mysql AB 08年被sun公司收购 09年被oracle公司收购 二.mysql的优点 1. 开源免费成本低 2. 性能高,移植性好 3. 体积 ...
- 编程语言-Ruby-问题整理
安装 https://github.com/oneclick/rubyinstaller2/releases/tag/RubyInstaller-2.6.0-1
- Django first()和last() F查询以及Q查询
一.first()和last() 分别返回queryset的第一项与最后一项,具体用法如下: p = Blog.objects.order_by('title').first() 等同于: try: ...
- 自动发现项目中的url
def check_url_exclude(url): """ 判断url是否需要自动被发现,如果不是则移除 :param url: 自动发现的url :return: ...
- vsphere虚拟化之 DNS服务的创建(二)
1.创建域控的DNS服务器,打开"服务器管理器",由此可以看到AD域安装成功后,DNS服务也附带安装成功. 2.点击“工具”--“DNS” 3.点击“正向查询区域”--“best. ...
- JDK动态代理和CGLIB动态代理编码
JDK动态代理[接口]: import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import jav ...
- MySQL-第九篇分组和组函数
1.组函数 组函数:即多行函数,组函数将一组记录作为整体计算,每组记录返回一个结果,而不是每条记录返回一个结果. 2.常用的组函数有: 1>avg([distinct|all]expr):计算多 ...
- 二维码生成器,基于python,segno库
import segno temp = input("Please enter value:") qr = segno.make(temp) qr.save("qrcod ...
- 记一次用Linux curl命令获取Django url返回值异常的问题
问题描述: curl 检测 URL 返回值以判断服务器是否正常 原命令:curl -I -m 10 -o /dev/null -s -w %{http_code} --insecure $url 问题 ...