IT廉连看——Uniapp——模板语法

news/2024/5/30 2:17:17/文章来源:https://blog.csdn.net/weixin_72932310/article/details/136697394

IT廉连看——Uniapp——模板语法

众所周知,Uniapp是使用vue.js框架开发出来的,所以说它可以使用vue中的语法和指令来开发我们的项目。如果没有学习过vue的话开发起来会比较吃力,所以这节课就带大家学习几个常用的vue知识。如果有学习过vue,那么可以把本章当作一个复习。

一、现在有一个空页面,我想在此页面显示一个hello,world。

第一种方式:

第二种方式:

使用插值表达式{{Text}}

Data中是写对象的,用于存储组件中的数据。

<template><view class="content">{{Text}}                                        //这里的text是表达式,并不是字符串</view>
</template>
​
<script>
export default {data() {return {Text:'hello,world'};},};
</script>
​
<style>
​
</style>

效果图:

如何证明已显示的hello,world是我们data中的内容:

这也是我们vue中的一个特点,当我们data中的数据发生改变时,页面会重新渲染。

第三种方式:

<template><view v-text="Text" class="content"></view>
</template>
​
<script>
export default {data() {return {Text:'hello,world'};},};
</script>
​
<style>
​
</style>

效果:

一点小区别:

现在所显示的两个hello,world有什么区别?

<template><view  class="content"><view class=""v-text="Text"></view><view class=""v-html="Text"></view></view>
</template>
​
<script>
export default {data() {return {Text:'<p>hello,world</p>'};},};
</script>
​
<style>
​
</style>

第一个hello,world,是我们text中原原本本的一个字符串
第二个hello,world,是我们使用v-html这个指令显示的内容,这是因为我们使用v-html指令他会对后面text这个表达式进行解析,如果解析出来是一个dom元素那它就不会以一个字符串的形式展示内容,而是将里面的内容展现在页面上。
此时再次添加一个插值表达式进行对比。
<template><view  class="content">{{Text}}<view class=""v-text="Text"></view><view class=""v-html="Text"></view></view>
</template>
​
<script>
export default {data() {return {Text:'<p>hello,world</p>'};},};
</script>
​
<style>
​
</style>

此时发现插值表达式输出的结果是与我们v-text是一样的,它不会像v-html一样对变量进行一个解析,而是将它以字符串的形式原原本本的渲染到页面。

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

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

相关文章

在Linux/Ubuntu/Debian中使用7z压缩和解压文件

要在 Ubuntu 上使用 7-Zip 创建 7z 存档文件&#xff0c;你可以使用“7z”命令行工具。 操作方法如下&#xff1a; 安装 p7zip&#xff1a; 如果你尚未在 Ubuntu 系统上安装 p7zip&#xff08;7-Zip 的命令行版本&#xff09;&#xff0c;你可以使用以下命令安装它&#xff1a;…

8-图像放大

其实&#xff0c;就是开辟一个zoomwidth&#xff0c;zoomheight的内存&#xff0c;再分别赋值即可。 void CDib::Maginify(float xZoom, float yZoom) { //指向原图像指针 LPBYTE p_data GetData(); //指向原像素的指针 LPBYTE lpSrc; //指向缩放图像对应像素的指针 LPBYTE l…

机器学习-0X-神经网络

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中神经网络算法。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化接口实现 参考 机器学习定义 关于机…

jmeter 中用python 实现请求参数的随机

首先需要下载插件来让jmeter支持python脚本 下载地址&#xff1a;https://www.jython.org/download&#xff0c;下载完成后放到jmeter安装目录的lib文件夹下 放置完成后需要重启jmeter&#xff0c;添加JSR223 PreProcessor&#xff0c;Language下拉框中多2项 选择第一项&#…

【CSP试题回顾】201712-2-游戏

CSP-201712-2-游戏 解题思路 代码实现了一个模拟游戏过程的算法&#xff0c;其中n个小朋友围成一圈&#xff0c;按照顺时针方向依次编号从1到n&#xff0c;然后按顺时针方向依次报数。每当报的数是k的倍数或者个位数是k时&#xff0c;报数的小朋友会被淘汰。游戏继续进行&…

unity2D生成9*9格子

1.创建一个空对象和格子 2将格子做成预制体&#xff08;直接将格子拖到这里即可&#xff0c;拖了过后删掉原来的格子&#xff09; 3.创建脚本并将脚本拖到空对象上 using System.Collections; using System.Collections.Generic; using UnityEngine;public class CreateMap : M…

Docker出现容器名称重复如何解决

假如你的重复容器名称是mysql5 删除已存在的容器&#xff1a;如果你不再需要那个已经存在的名为“mysql5”的容器&#xff0c;你可以删除它。使用下面的命令&#xff1a; docker rm -f mysql5这条命令会强制删除正在运行的容器。一旦容器被删除&#xff0c;你就可以重新使用这个…

22-Java状态模式 ( State Pattern )

Java状态模式 摘要实现范例 状态模式&#xff08;State Pattern&#xff09;中类的行为是基于它的状态改变的 在状态模式中&#xff0c;我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象 状态模式属于行为型模式 摘要 1. 意图 允许对象在内部…

操作系统(AndroidIOS)图像绘图的基本原理

屏幕显示图像的过程 我们知道&#xff0c;屏幕是由一个个物理显示单元组成&#xff0c;每一个单元我们可以称之为一个物理像素点&#xff0c;而每一个像素点可以发出多种颜色。 而图像&#xff0c;就是在不同的物理像素点上显示不同的颜色构成的。 像素点的颜色 像素的颜色是…

PyCharm创建一个简单的Django项目

1.Django简介 Django 是一个开放源代码的 Web 应用程序框架&#xff0c;由 Python 编写而成。它遵循 MVC&#xff08;模型-视图-控制器&#xff09;的软件设计模式&#xff0c;采用了 MTV&#xff08;模型-模板-视图&#xff09;的架构。Django 的设计目标是使开发复杂的、数据…

《ElementPlus 与 ElementUI 差异集合》el-input 多包裹一层 el-input__wrapper

差异 element-ui el-input 中&#xff0c;<div class"el-input"> 下一级就是 <input> 标签 &#xff1b;element-plus el-input中&#xff0c;<div class"el-input"> 和 <input> 标签之间多了一层 <div class"el-input__…

Jmeter+ant,ant安装与配置

1.ant含义 ant&#xff1a;Ant翻译过来是蚂蚁的意思&#xff0c;在我们做接口测试的时候&#xff0c;是可以用来做JMeter接口测试生成测试报告的工具 2.ant下载 下载地址&#xff1a;Apache Ant - Ant Manual Distributions download中选择ant 下载安装最新版zip文件 3.…

浅谈路由器基本结构与工作原理

目录 一、结构 1.1 输入端口 1.2 交换结构 1.3 输出端口 1.4 路由选择处理器 二、输入端口处理和基于目的地转发 三、交换 四、输出端口处理 五、何时出现排队 5.1 输入排队 5.2 输出排队 一、结构 下图是一个通用路由器体系结构的总体试图视图&#xff0c;其主要由…

使用Lua配置NeoVim

使用Lua配置NeoVim 源码地址依次添加插件视频地址 源码地址 Github: my-neovim-lua 依次添加插件 Lazy.nvim: nvim的插件管理器catpuccin: 舒缓柔和的主题插件telescope: 负责查找、过滤、预览treesitter: 基于语法树实现语法高亮neo-tree: 文件导航栏 。。。等待解锁更多 …

Python和Tensorboard的下载和安装

Python和Tensorboard的下载和安装 Python的下载和安装Python下载Python安装测试Python Tensorboard的下载和安装Tensorboard 简介Tensorboard下载Tensorboard使用urllib3报错 Python的下载和安装 Python下载 Python官方下载链接&#xff1a;https://www.python.org/downloads…

python讲解(2)

目录 一.变量与赋值 二.字符串类型 引号&#xff1a; 三引号&#xff1a; 字符串拼接 三.len函数 四.注释 注释的方法 一.# 二.文档字符串 注释的要求 群体注释 五.python的报错 六.bool类型 一.变量与赋值 python中的变量是不需要声明的&#xff0c;直接定义即…

人工智能技术如何彻底改变现代商业实践

在当今快节奏、不断发展的世界中&#xff0c;人工智能&#xff08;AI&#xff09;技术的集成在各个行业中变得越来越普遍。从医疗保健到金融&#xff0c;从制造到零售&#xff0c;人工智能正在以曾经难以想象的方式彻底改变现代商业实践。 人工智能凭借其分析大量数据、自动化…

HANA VIEW 用 ABAP 创建CDS VIEW,在生成ODATA

这里我们做ADT来创建 场景介绍&#xff1a;把hana中的一个底表&#xff0c;创建成ABAP的 CDS VIEW &#xff0c;在把CDS VIEW 生成 OData 服务。 一、创建CDS Table Function 红框内根据自身情况填写 选择 Define Table Function with Parameters 创建 Data Definition 完整…

RabbitMQ 模拟实现【六】:程序模拟实现

文章目录 模拟实现模拟消费者模拟生产者效果展示 启动结果如下&#xff1a; ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/71841546ad8043f1bd51e4408df791de.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f6e3e72ff9a4483c978ec48e24f075c2.p…

RabbitMQ发布确认高级版

1.前言 在生产环境中由于一些不明原因&#xff0c;导致 RabbitMQ 重启&#xff0c;在 RabbitMQ 重启期间生产者消息投递失败&#xff0c; 导致消息丢失&#xff0c;需要手动处理和恢复。于是&#xff0c;我们开始思考&#xff0c;如何才能进行 RabbitMQ 的消息可靠投递呢&…