vue指令(代码部分)

news2024/12/24 3:20:14

注:此部分为学习uni-app时接触到的vue

<template>
	<view>
		<view>当前标题:{{title}}</view>
		<view> {{num}}</view>
		<view>{{arr[2]}}</view>
		<view>{{obj}}</view>
		<view>{{obj.name}}</view>
		
		----------------v-if/v-else---------------------
		<view v-if="day==1">周一</view>
		<view v-else-if="day==2">周二</view>
		<view v-else-if="day==3">周三</view>
		<view v-else-if="day==4">周四</view>
		<view v-else-if="day==5">周五</view>
		<view v-else-if="day==6">周六</view>
		<view v-else-if="day==7">周日</view>
		<view v-else>格式错误</view>
		----------------v-if---------------------
		<view v-if="state">uniapp</view>
		<view v-else>html+css</view>
		----------------v-show---------------------
		<view v-show="state">控制台隐藏相关信息</view>
		<view v-show="!state">html+css</view>
		
		----------for---------------
		<view v-for="(item,index) in arr" class="out">
			<view class="row">{{(index+1)+"----"+item}}</view>
		</view>
		----------goods---------------
		<view class="goods" v-for="item in goods" :key="item.id">
			<view>商品名称:{{item.title}} - 商品价格:¥{{item.price}}</view>
		</view>
		----------for object---------------
		<view v-for="(value,name,index) in obj">
			{{index}} - {{name}}:{{value}}
		</view>
		-------------v-html---------------
		<view>{{title}}</view>
		<view v-html="title"></view>
		v-html可以渲染html标签(小程序无法识别html标签)
		<view>{{code}}</view>
		<view v-html="code"></view>
		-------------v-bind绑定---------------
		<!-- <image v-bind:src="img"></image>
		<image :src="img"></image> -->
		<image :src="'../../static/logo'+item+'.png'" v-for="item in [1,2,3]"></image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img:"../../static/logo.png",
				code:"<h1>HZLX</h1><em>uniapp</em>",
				title:"微信小程序",
				num:123,
				arr:["aaa","bbb","ccc",1,2,3],
				obj:{name:"张三",age:22},
				state:true,
				day:4,
				goods:[
					{	
						id:1,
						title:"商品1",
						price:22.5
					},
					{
						id:2,
						title:"商品2",
						price:66.6
					}
				]
			};
		}
	}
</script>

<style lang="scss">
.out{
	.row{
		font-size: 50rpx;
		border-bottom:  solid black 1rpx ;
	}
}
</style>

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

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

相关文章

导览软件定制开发方案

随着智能手机的普及和人们对文化、旅游等方面的需求不断增加&#xff0c;导览软件市场前景广阔。本文将围绕导览软件定制开发方案展开&#xff0c;包括以下部分&#xff1a; 一、行业现状及市场需求 导览软件市场发展迅速&#xff0c;各类导览软件层出不穷。通过对市场…

价值1000的情感爆文写作prompt,助你写出10万+阅读微信爆文

原文&#xff1a;价值1000的情感爆文写作prompt&#xff0c;助你写出10万阅读微信爆文 - 知乎 是否经常看到一些自媒体晒出这样的图片&#xff1f; 或者是这样的10w的阅读文章 那么这是真实能赚钱的吗&#xff1f;还是自媒体夸大其说&#xff0c;吸引流量。 我们先简单了解什…

ElementUI之登陆+注册->饿了吗完成用户登录界面搭建,axios之get请求,axios之post请求,跨域,注册界面

饿了吗完成用户注册登录界面搭建axios之get请求axios之post请求跨域 1.饿了吗完成用户注册登录界面搭建 将端口号8080改为8081 导入依赖&#xff0c;在项目根目录使用命令npm install element-ui -S&#xff0c;添加Element-UI模块 -g&#xff1a;将依赖下载node_glodal全局依…

网络上怎么赚点零花钱

现代物质社会中&#xff0c;我们常常会被琐碎的开销困扰。无论是衣食住行还是休闲娱乐&#xff0c;总有一些额外的花费&#xff0c;使我们不得不时常思索如何赚点零花钱。而现如今&#xff0c;随着互联网的飞速发展&#xff0c;我们有了更多的机会通过网络来实现这个目标。现在…

Centos7做回收站功能-防止误删除

Centos7做回收站功能&#xff0c;就算误删了文件&#xff0c;也可以还原回来 小白教程&#xff0c;一看就会&#xff0c;一做就成。 1.先创建一个回收站的目录&#xff08;我在/data下&#xff09; 在大磁盘的目录下创建.trash文件夹 mkdir -p /data/.trash 2.在/root/.bas…

Vue之ElementUI实现登陆及注册

目录 ​编辑 前言 一、ElementUI简介 1. 什么是ElementUI 2. 使用ElementUI的优势 3. ElementUI的应用场景 二、登陆注册前端界面开发 1. 修改端口号 2. 下载ElementUI所需的js依赖 2.1 添加Element-UI模块 2.2 导入Element-UI模块 2.3 测试Element-UI是否能用 3.编…

Nodejs基于Vue.js编程语言在线学习平台的设计与实现5y4p2

本编程语言在线学习平台是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了用户和管理员这二者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可能优…

【08】FISCOBCOS一键部署【07+08即可完成一键部署,默认生成两个节点的链】

官方文档https://webasedoc.readthedocs.io/zh_CN/latest/docs/WeBASE/install.html#id1 一键部署 ​ 一键部署可以在 同机 快速搭建WeBASE管理台环境&#xff0c;方便用户快速体验WeBASE管理平台。 ​ 一键部署会搭建&#xff1a;节点&#xff08;FISCO-BCOS 2.0&#xff09;…

SQL数据库基础

目录 1.SQL分类 2.SQL-DDL 2.1 数据库操作 查询 创建 删除 使用某个数据库 2.2 数据表操作 创建表 查询表 修改表 3.SQL-DML(增删改) 3.1 插入 3.2 修改 3.3 删除 4.SQL-DQL(查) 4.1 基础查询 4.2 条件查询 4.3 聚合函数查询 4.4 分组查询 4.5 排序查询 …

递归法求最大公约数

如果a或b不是不是正整数&#xff0c;则函数返回-1。 主程序样例&#xff1a; 这里给出主函数及对Gcd函数的调用样例&#xff1a; #include <stdio.h> int Gcd(int a, int b); int main() { int a, b, c; scanf(“%d %d”, &a, &b); c Gcd(a,b); if (c ! -1) {…

Python实战实例代码-网络爬虫-数据分析-机器学习-图像处理

Python实战实例代码-网络爬虫-数据分析-机器学习-图像处理 Python实战实例代码1. 网络爬虫1.1 爬取网页数据1.2 爬取图片1.3 爬取动态数据&#xff08;使用Selenium&#xff09; 2. 数据分析2.1 数据清洗2.2 数据变换2.3 数据聚合 3. 机器学习3.1 线性回归3.2 随机森林3.3 K-Me…

ElementUI之登陆+注册

一.什么是ElementUI 二.ElementUI完成用户注册登录界面搭建 使用命令npm install element-ui -S&#xff0c;添加Element-UI模块 导依赖 建立登录和注册页面 ​编辑 配置样式 编写登录页面&#xff08;Login&#xff09; 编写注册页面&#xff08;reginter&#xff09; …

结构体,联合体与位段

1.结构体的内存对齐(计算结构体的大小) 1.1 为什么需要结构体内存对齐? 原因1:平台原因 不是所有的硬件平台都能访问任意地址上的任意数据的&#xff1b;某些平台只能在某些地址处取得某些特定类型的数据&#xff0c;否则抛出硬件异常。 比如&#xff0c;当一个平台要取一个…

黑马程序员2023新版JavaWeb企业开发全流程学习笔记(涵盖Spring+MyBatis+SpringMVC+SpringBoot等)

目录 零、Web开发一、HTML-CSS初识Web前端Web前端课程安排小结 HTML、CSS介绍HTML快速入门HTML小结VS Code开发工具基础标签 & 样式-合集&#xff08;拟新浪微博为例&#xff09;标题排版样式超链接 正文排版布局 表格、表单标签表格标签表单标签表单项 二、JavaScriptJS基…

车载软件架构 —— AUTOSAR Vector SIP包(三)

车载软件架构 —— AUTOSAR Vector SIP包(三) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在…

【计算机网络笔记四】应用层(一)DNS域名解析

因特网的域名空间是一棵倒着生长的树&#xff0c;各级域名由其上一级域名管理机构管理。 这种按等级管理的命名方法便于维护名字的唯一性&#xff0c;并且容易设计出一种高效的域名查询机制。 注意&#xff1a;域名只是个逻辑概念&#xff0c;并不代表计算机所在的物理地点 域…

10.mysql系统配置与启动选项

title: “mysql系统配置与启动选项” createTime: 2022-03-06T15:52:4108:00 updateTime: 2022-03-06T15:52:4108:00 draft: false author: “ggball” tags: [“mysql”] categories: [“db”] description: “” 启动选项与系统变量 启动选项 长格式与短格式 在执行启动脚…

el-tree实现表格方式菜单

<template><div class"table"><!-- default-expand-all 默认展开全部数据 --><!-- expand-on-click-node 只有点击箭头才会收缩节点 --><!-- check-on-click-node 点击文本选中 --><!-- show-checkbox 复选框 --><div class&…

Mybatis-分页插件

Mybatis-分页插件 前言一、分页插件的使用步骤1.添加依赖2.配置分页插件3. 分页插件的使用 前言 可以通过分页插件在实现以下前端样式时更加方便&#xff1a; 首页 上一页 2 3 4 5 6 下一页 末页 limit index,pageSize pageSize&#xff1a;每页显示的条数 pageNum&#xff…

TVP 专家谈腾讯云 Cloud Studio:开启云端开发新篇章

点击链接了解详情 导语 | 近日&#xff0c;由腾讯云 TVP 团队倾力打造的TVP 吐槽大会第六期「腾讯云 Cloud Studio专场圆满落幕&#xff0c;6 位资深的 TVP 专家深度体验腾讯云 Cloud Studio 产品&#xff0c;提出了直击痛点的意见与建议&#xff0c;同时也充分肯定了腾讯云 Cl…