Vue3的模板语法插值表达式用法

在template中输入“5 + 3” ,是没有运算能力的,只会把字符直接显示出来,代码如下:

<template><view>这是demo</view><view>5 + 3</view><navigator open-type="navigateBack"><view>返回上一页面</view></navigator><input type="text" placeholder="文本框内有初始内容" confirm-type="next"/><button size="mini" type="primary"><view>按钮!</view></button>
</template><script setup></script><style></style>

效果如下:
在这里插入图片描述
接下来,使用插值表达式({{}}),使其具有运算能力,代码如下:

<template><view>这是demo</view><view>{{5 + 3}}</view><navigator open-type="navigateBack"><view>返回上一页面</view></navigator><input type="text" placeholder="文本框内有初始内容" confirm-type="next"/><button size="mini" type="primary"><view>按钮!</view></button>
</template><script setup></script><style></style>

效果如下:
在这里插入图片描述
在script中设置变量const c = 9,若想在template中取c的值,用插值表达式括起来就可以了,代码如下:

<template><view>这是demo</view><view>{{5 + 3}}</view><view>{{c}}</view><navigator open-type="navigateBack"><view>返回上一页面</view></navigator><input type="text" placeholder="文本框内有初始内容" confirm-type="next"/><button size="mini" type="primary"><view>按钮!</view></button>
</template><script setup>const c = 9 ;
</script><style></style>

效果如下:
在这里插入图片描述
在插值表达式中写入方法或三目运算符等,都是可以的,代码如下:

<template><view>这是demo</view><view>{{5 + 3}}</view><view>{{c}}</view><view>这里是方法:{{Math.random()}}</view><view>这里是三目表达式:{{5 > 4 ? '张三' : '李四'}}</view><navigator open-type="navigateBack"><view>返回上一页面</view></navigator><input type="text" placeholder="文本框内有初始内容" confirm-type="next"/><button size="mini" type="primary"><view>按钮!</view></button>
</template><script setup>const c = 9 ;
</script><style></style>

效果如下:

在这里插入图片描述
还可以在script中写函数,在template中用插值表达式调用,代码如下:

<template><view>这是demo</view><view>{{5 + 3}}</view><view>{{c}}</view><view>这里是方法:{{Math.random()}}</view><view>这里是三目表达式:{{5 > 4 ? '张三' : '李四'}}</view><view>函数调用成功:{{GC()}}</view><navigator open-type="navigateBack"><view>返回上一页面</view></navigator><input type="text" placeholder="文本框内有初始内容" confirm-type="next"/><button size="mini" type="primary"><view>按钮!</view></button>
</template><script setup>const c = 9 ;function GC(){return "Vue3的学习"}
</script><style></style>

效果如下:
在这里插入图片描述

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

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

相关文章

中英双语介绍美国的州:亚利桑那州(Arizona)

中文版 亚利桑那州简介 亚利桑那州&#xff08;Arizona&#xff09;位于美国西南部&#xff0c;以其壮观的自然景观、温暖的气候和多元的文化遗产而著名。以下是对亚利桑那州的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要城市。 地理位置 亚利桑那州…

【OpenSSH】立即检测 OpenSSH 的 regreSSHion 漏洞

OpenSSH regreSSHion 漏洞简介 OpenSSH 是一种广泛使用的网络协议&#xff0c;提供加密的数据通信和远程登录功能。然而&#xff0c;最近发现的一个漏洞&#xff08;CVE-2024-6387&#xff09;&#xff0c;被称为 regreSSHion&#xff0c;使得未经身份验证的攻击者能够在 Linu…

FlowUs新一代内容创作营销平台|FlowUs息流国产 好用 不限速

FlowUs 作为一个知识管理和协作平台&#xff0c;知识库功能可以被视为一个强大的学习工具&#xff01; 为什么FlowUs知识库可以成为学习利器呢&#xff1f;原因有以下几点 集中化知识存储&#xff1a;FlowUs允许我们将所有相关信息和资料集中在一个地方&#xff0c;便于访问和复…

zed_ros2_wapper colcon 报错

问题一&#xff1a; CMake Error at CMakeLists.txt:129 (find_package): By not providing “Findnmea_msgs.cmake” in CMAKE_MODULE_PATH this project has asked CMake to find a package configuration file provided by “nmea_msgs”, but CMake did not find one. Co…

不可忽视的安全防线:深入探讨安全阀检测时间的选择

在工业生产中&#xff0c;安全阀被誉为设备的“守护者”&#xff0c;它承担着防止压力过高导致设备损坏或事故发生的重要使命。然而&#xff0c;安全阀的性能并非永恒不变&#xff0c;其有效性需要通过定期检测来验证。 接下来&#xff0c;佰德将深入探讨安全阀检测的重要性、…

JCEF 在idea 开发 java 应用

JCEF&#xff08;Java Chromium Embedded Framework&#xff09;是一个Java库&#xff0c;用于在Java应用程序中嵌入Chromium浏览器引擎。如果您想在IDEA开发环境中使用JCEF&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 下载JCEF库文件&#xff1a;您可以从JCEF的官…

K8s 的最后一片拼图:dbPaaS

K8s 的发展使得私有云跟公共云之间的技术差不断的缩小&#xff0c;不管是在私有云还是公共云&#xff0c;大家今天都在基于 K8s 去开发 PaaS 系统。而 K8s 作为构建 PaaS 的基础&#xff0c;其全景图里还缺最后一块“拼图”——dbPaaS。作为一个云数据库行业干了十几年的资深从…

在uni-app使用vue3使用vuex

在uni-app使用vue3使用vuex 1.在项目目录中新建一个store目录&#xff0c;并且新建一个index.js文件 import { createStore } from vuex;export default createStore({//数据&#xff0c;相当于datastate: {count:1,list: [{name: 测试1, value: test1},{name: 测试2, value: …

LLM笔记:训练大模型之并行化

1 数据并行 最常见的并行化手段主要是把数据分成多个块&#xff0c;然后每个节点就可以在本地独立的跑各自的数据任务&#xff0c;最后再和其他节点通信&#xff0c;进而汇总最后的结果好处就是计算效率高&#xff0c;每个节点可以独自计算自己的任务且这种方法易于实现缺点就…

springboot筛选当月,本周,当天数据

按天分组&#xff0c;create_time是表中的字段 Query(value "SELECT DATE_FORMAT( create_time, %Y-%m-%d ) date, COUNT( * ) number FROM register_user where create_time BETWEEN ?1 and ?2 GROUP BY date; ",nativeQuery true) List<Map> countDay(…

【长亭WAF(雷池)——网站保护之“动态防护”】

在当今的网络安全环境中&#xff0c;Web应用防火墙&#xff08;WAF&#xff09;扮演着至关重要的角色。 它们不仅能够防御常见的Web攻击&#xff0c;如SQL注入、跨站脚本攻击&#xff08;XSS&#xff09;等&#xff0c;还能够应对日益复杂的网络威胁。 作为业内领先的Web安全解…

Python高级编程——Functools的使用方法

目录 一、引言 二、funtools.partial 三、functools.lru_cache 四、functools.reduce 五、functools.update_wrapper 六、functools.total_ordering 七、functools.singledispatch 八、functools.cached_property ( > Python 3.8) 九、参考资料 一、引言 Python是一…

《安富莱嵌入式周报》第339期:单片机运行苹果早期Mac系统模拟器,2GHz示波器有源探头,下一代矩阵开关面包板,卡片式声音分贝器,HP经典示波器,ReRAM

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版 https://www.bilibili.com/video/BV1Kf421Q7Lh 《安富莱嵌入式周报》第339期&#xff1a;单片机运行苹果早期Ma…

嵌入式Linux系统编程 — 6.3 kill、raise、alarm、pause函数向进程发送信号

目录 1 kill函数 1.1 kill函数介绍 1.2 示例程序 2 raise函数 2.1 raise函数介绍 2.2 示例程序 3 alarm函数 3.1 alarm函数介绍 3.2 示例程序 4 pause函数 4.1 pause函数介绍 4.2 示例程序 与 kill 命令相类似&#xff0c; Linux 系统提供了 kill()系统调用&#…

Chapter9 更复杂的光照——Shader入门精要学习笔记

Chapter9 更复杂的光照 一、Unity的渲染路径1.渲染路径的概念2.渲染路径的类型①前向渲染路径a. 前向渲染路径的原理b. Unity中的前向渲染c. 两种Pass ②延迟渲染路径a. 延迟渲染路径的原理b. Unity中的延迟渲染c. 两种Pass ③顶点照明渲染路径 二、Unity的光源类型1.光源类型①…

Webpack: 核心流程之Init、Make、Seal

概述 在前文中&#xff0c;我们了解了 Webpack 的基本应用、性能优化、Loader 与 Plugin 组件开发方方面面的知识&#xff0c;相信学习过这些内容之后&#xff0c;你已经对 Webpack 有相当深入的理解了&#xff0c;可以开始从更底层的视角&#xff0c;自底向上重新审视 Webpac…

直流电机介绍

一、引入 电机&#xff0c;即电动机&#xff08;motor&#xff09;俗称马达&#xff0c;是电能转化为机械能的总称&#xff0c;按工作原理分类电机可以分为&#xff1a;直流电机&#xff08;通过直流电源供电&#xff0c;依靠电刷和换向器改变电流方向&#xff0c;产生连续转动…

文献解读-长读长测序-第十四期|《作为了解棉花驯化的资源,印度棉(Gossypium herbaceum L. Wagad)基因组》

关键词&#xff1a;基因组&#xff1b;长读长测序&#xff1b;棉花基因组&#xff1b; 文献简介 标题&#xff08;英文&#xff09;&#xff1a;The Gossypium herbaceum L. Wagad genome as a resource for understanding cotton domestication标题&#xff08;中文&#xff…

命令在crontab中的行为和在命令行中的行为不一致

在crontab中&#xff0c;如果设置一个定时任务echo 123 &> log.txt&#xff0c;会发现执行完成后&#xff0c;cat log.txt为空。 但在bash中&#xff0c;如果执行echo 123 &> log.txt&#xff0c;执行完成后&#xff0c;cat log.txt会打印123。 这是因为在cront…

DBdoctor v3.2.2 版本发布,支持对sqlserver、vastbase的纳管!

DBdoctor 3.2.2版本新增PgSQL的索引推荐及性能审核功能&#xff1b;拓展了oracle的纳管版本并支持纳管oracle rac&#xff1b;新增对sqlserver、vastbase数据库的纳管支持&#xff1b;修复了体验官活动中大家提出的一系列体验问题。 详细更新内容如下&#xff1a; 功能优化 Pg…