uni-app 之 vue语法

uni-app 之 vue语法

image.png

--- v-html 字符 ---

image.png

<template><view><view>{{title}}</view>--- v-html 字符 ---<view>{{title2}}</view><view v-html="title2"></view><view>{{arr}}</view><view>{{arr[2]}}</view><view>{{obj}}</view><view>{{obj.name}}</view></view>
</template><script>export default {data() {return {title:"test測試",title2: "<h1>test測試</h1><em>test測試</em>",arr:["aa","bb","cc"],obj:{name:"張三",age:22}}}}
</script><style>
</style>


判断 v-if,v-else-if,v-else

image.png

    <view v-if="xiao==1">嘎嘎</view><view v-else-if="xiao==2">嘻嘻</view><view v-else-if="xiao==3">哈哈</view><view v-else>呱呱</view>


循环列表

image.png

<template><view>--- 循環1 ---<view v-for="item in arr">{{item}}</view>--- 循環2 ---<view v-for="(item,index) in arr"><view>{{(index+1)+"拼接"+item}}</view></view>--- 循環3 ---<view v-for="(value,name,index) in obj"><view>{{index}} - {{name}} - {{value}}</view></view>--- 循環4 不加key在有些平台会异常,這是唯一标识 ---<view v-for="(item) in goods" :key="item.id"><view>商品:{{item.title}} - 價格:{{item.price}}</view></view></view>
</template><script>export default {data() {return {arr: ["aa", "bb", "cc"],obj: {name: "張三",age: 22},xiao: 2,goods: [{id: 11,title: "蘋果",price: 2.5},{id: 12,title: "鴨梨",price: 2},{id: 13,title: "蟠桃",price: 3}]}}}
</script><style>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/69715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

API接口接入电商平台案例,采集淘宝天猫拼多多1688京东LAZADA数据按关键字搜索商品示例

按关键字搜索商品数据API接口可以让用户轻松地在海量商品中找到自己需要的商品。这个接口包括多种搜索方式&#xff0c;例如利用关键字搜索商品名称、商品描述、商品分类、商家信息等。同时&#xff0c;还可以通过不同的排序方式进行筛选&#xff0c;例如销量排行、价格排行、评…

垃圾回收 - 标记压缩算法

压缩算法是将标记清除算法与复制算法相结合的产物。 1、什么是标记压缩算法 标记压缩算法是由标记阶段和压缩阶段构成。 首先&#xff0c;这里的标记阶段和标记清除算法时提到的标记阶段完全一样。 接下来我们要搜索数次堆来进行压缩。压缩阶段通过数次搜索堆来重新填充活动对…

51单片机简易时钟闹钟八位数码管显示仿真( proteus仿真+程序+原理图+报告+讲解视频)

51单片机简易时钟闹钟八位数码管显示仿真( proteus仿真程序原理图报告讲解视频&#xff09; 1.主要功能&#xff1a;2.仿真3. 程序代码4. 原理图元器件清单 5. 设计报告6. 设计资料内容清单&&下载链接资料下载链接&#xff08;可点击&#xff09;&#xff1a; 51单片机…

排序算法:堆排序

数组、链表都是一维的数据结构&#xff0c;相对来说比较容易理解&#xff0c;而堆是二维的数据结构&#xff0c;对抽象思维的要求更高&#xff0c;所以许多程序员「谈堆色变」。但堆又是数据结构进阶必经的一步&#xff0c;我们不妨静下心来&#xff0c;将其梳理清楚。 堆&…

【MySQlL学习笔记】(九)内外连接

内外连接 内连接外连接左外连接右外连接 表的连接分为内连和外连 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的查询都是内连接&#xff0c;也是在开发过程中使用的最多的连接查询。 语法&#xff1a; select 字段 from 表…

腾讯云网站备案详细流程_审核时间说明

腾讯云网站备案流程先填写基础信息、主体信息和网站信息&#xff0c;然后提交备案后等待腾讯云初审&#xff0c;初审通过后进行短信核验&#xff0c;最后等待各省管局审核&#xff0c;前面腾讯云初审时间1到2天左右&#xff0c;最长时间是等待管局审核时间&#xff0c;网站备案…

选择最适合您的Bug管理软件:市场比较与推荐

“Bug管理软件哪家好&#xff1f;市场上有许多优秀的Bug管理系统品牌如&#xff1a;Zoho Projects、JIRA、Redmine、Bugzilla、MantisBT。” 一款高效的Bug管理系统可以帮助团队更有效地发现、记录和解决软件中的问题&#xff0c;从而提高产品质量和用户满意度。本文将为您介绍…

QT人脸识别知识

机器学习的作用&#xff1a;根据提供的图片模型通过算法生成数据模型&#xff0c;从而在其它图片中查找相关的目 标。 级联分类器&#xff1a;是用来人脸识别。 在判断之前&#xff0c;我们要先进行学习&#xff0c;生成人脸的模型以便后续识别使用。 人脸识别器&#xff1a;…

jenkins常见问题

1、忘记密码&#xff1f; 解决办法&#xff1a; 找到安装目录&#xff0c;linux安装目录一般是在/root/.jenkins,下用户文件users/admin_xxxxxx/config.xml文件。 打开文件&#xff0c;找到passwordHash块改为&#xff1a;#jbcrypt:$2a 10 10 10DdaWzN64JgUtLdvxWIflcuQu2fgrrM…

Java 复习笔记 - 面向对象篇

文章目录 一&#xff0c;面向对象概述二&#xff0c;类和对象&#xff08;一&#xff09;类和对象的概述&#xff08;二&#xff09;定义类的补充注意事项 三&#xff0c;封装四&#xff0c;就近原则和this关键字&#xff08;一&#xff09;就近原则&#xff08;二&#xff09;…

自学Python01-创建文件写入内容

此处省去安装和前言&#xff0c;需要两个东西 一个去下载安装python官方库 Welcome to Python.org 一个是编译器pycharm PyCharm 安装教程&#xff08;Windows&#xff09; | 菜鸟教程 PyCharm: the Python IDE for Professional Developers by JetBrains 第一节 练习print…

Java复习-23-包

包的定义与使用 包的定义 包 存放类程序文件的目录&#xff0c;程序类中定义的包名称必须采用小写字母的形式定义。 package com.example.demo ; // 定义包&#xff0c;其中.表示分割子目录 (子包) public class Hello {public static void main(String args[]) {System.ou…

记录--移动端的双击事件好不好用?

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 2023年了&#xff0c;我不允许还有人不会自己实现移动端的双击事件。 过来&#xff0c;看这里&#xff0c;不足 50 行的代码实现的双击事件。 听笔者娓娓道来。 dblclick js原生有个dblclick双击…

UDP的可靠性传输

UDP系列文章目录 第一章 UDP的可靠性传输-理论篇&#xff08;一&#xff09; 第二章 UDP的可靠性传输-理论篇&#xff08;二&#xff09; 文章目录 UDP系列文章目录前言1.TCP 和UDP格式对比2.UDP分片原理3.UDP 传输层应该注意问题4.MTU5.UDP 分片机制设计重点 一、ARQ协议什么…

Python基础知识详解:数据类型、对象结构、运算符完整分析

文章目录 python基础知识数据类型类型检查对象&#xff08;object&#xff09;对象的结构变量和对象类型转换运算符(操作符)1. 算术运算符2. 赋值运算符3. 比较运算符&#xff08;关系运算符&#xff09;4. 逻辑运算符5. 条件运算符&#xff08;三元运算符&#xff09; 总结 py…

【PowerQuery】PowerQuery导入JSON数据

Json数据是目前使用的最为频繁和广泛的一种数据交换格式,JSON的全称为JavaScript Object Notation。Json 主要用于在互联网的消息的数据交换信息传递,他的格式与XML有什么区别呢?为什么不用XML,用Json有啥好处呢?我们接下来讨论下Json相比XML的优势: XML传递的数据过多服…

git回退到某个提交

git是一个分布式版本控制软件&#xff0c;分布式版本库的做法使源代码的发布和交流都极为方便&#xff0c;因此有不少用户都在使用git。最近小编也正在学习git这款软件&#xff0c;发现要想熟练运用git&#xff0c;学会git中的一些命令是很重要的&#xff0c;如果我们要回滚到某…

手写RPC框架--2.介绍Zookeeper

RPC框架-Gitee代码(麻烦点个Starred, 支持一下吧) RPC框架-GitHub代码(麻烦点个Starred, 支持一下吧) 该项目的RPC通信将采用NettyZookeeper&#xff0c;所以会在前两章介绍使用方法 介绍Zookeeper Zookeepera.概述1) 数据模型2) Watcher机制 b.安装和基本操作1) Java操作zooke…

16字节协议的串口通信

1.协议要求 协议为帧传输&#xff0c;一共16字节。主要是2字节的固定帧头 EB 90&#xff0c;2字节的帧计数(用来计数发出的帧),10字节的数据和2字节的校验位 帧头&#xff1a;2字节&#xff0c;固定值 8’HEB、8’H90 帧计数&#xff1a;2字节&#xff0c;用来说明发出去帧是…

Netty服务端启动的整体流程-基于源码4.1.96Final分析

Netty采用的是主从Reactor多线程的模型&#xff0c;参考Scalable IO in Java&#xff0c;但netty的subReactor为一个组 一、从FileServer服务器示例入手 public final class FileServer {static final boolean SSL System.getProperty("ssl") ! null;// Use the …