Vue3+Vite实现工程化,插值表达式和v-text以及v-html

1、插值表达式

插值表达式最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法,即 双大括号{{}}

  • 插值表达式是将数据 渲染 到元素的指定位置的手段之一
  • 插值表达式 不绝对依赖标签,其位置相对自由
  • 插值表达式中支持javascript的 运算表达式
  • 插值表达式中也支持 函数的调用 
<script setup>

            let msg = "hello vue!";

            let hello = function () {
              return "hello world!"
            };

            let getMsg=()=>{
              return "hello vue3 message";
            }
            let age = 19;
            let bee = "蜜 蜂";

            //购物车
            const carts = [{name: "可乐", price: 3, number: 10}, {name: "薯片", price: 6, number: 8}];

            //计算购物车总金额
            function compute() {
              let count = 0;
              for (let index in carts) {
                count += carts[index].price * carts[index].number;
              }
              return count;
            }

</script>

<template>

  <div>
              <!--1、插值表达式 -->
              {{msg}}<br>      <!--插值表达式不依赖于标签,可以直接输入变量-->
              {{msg+"2023"}}<br>   <!--插值表达式支持运算-->
              {{msg.toUpperCase()}}<br>  <!--插值表达式支持函数调用-->
              {{hello()}}<br>                <!--插值表达式支持函数-->

              <h1>{{msg}}</h1><br>
              msg的值为:{{msg}}<br>
              getMsg返回的值为:{{getMsg()}}<br>
              是否成年:{{age>18?"true":"false"}}<br>
              反转:{{bee.split(" ").reverse().join("-")}}<br>

              购物车总金额:{{carts[0].price*carts[0].number+carts[1].price*carts[1].number}}<br>
              购物车总金额:{{compute()}}<br>
  </div>

</template>


 2、v-text和v-html

为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令

  • v-*** 这种写法的方式使用的是 vue的命令
  • v-*** 的命令必须依赖元素,并且要写在元素的 开始标签
  • v-***指令支持 ES6中的字符串模板
  • v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本
  • v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本
<script setup>

              let str = "<input type='text' value='99'/>";

              let msg = "hello vue3";
              let getMsg=()=>{
                return msg;
              }
              let age = 19;
              let bee = "蜜 蜂";
              let redMsg='<font color="red">msg</font>'
              let greenMsg = '<font color="green">${msg}</font>';
</script>

<template>

  <div>
                <!--2.v-text和v-html-->
                <p v-text="str"></p><!--innerText()-->
                <p v-html="str"></p><!--innerHTML()-->

                <span v-text="msg"></span><br>
                <span v-text="redMsg"></span><br>
                <span v-text="getMsg()"></span><br>
                <span v-text="age>18?'成年':'未成年'"></span><br>
                <span v-text="bee.split(' ').reverse().join('-')"></span><br>

                <h1>=============</h1>

                <span v-html="msg"></span><br>
                <span v-html="redMsg"></span><br>
                <span v-html="greenMsg"></span><br>
                <span v-html="`<font color='green'>${msg}</font>`"></span>


  </div>

</template>


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

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

相关文章

NSSCTF第13页(1)

[NCTF 2018]Easy_Audit 小小代码审计 $_REQUEST:PHP的内置变量&#xff0c;是一个数组&#xff0c;保存传递的参数&#xff0c;它的特性是如果get,post一起传参&#xff0c;则会优先post传参&#xff0c;可以由此进行变量覆盖。 $_SERVER:PHP的内置变量&#xff0c;是一个数组…

unity教程

前言 伴随游戏行业的兴起&#xff0c;unity引擎的使用越来越普遍&#xff0c;本文章主要记录博主本人入门unity的相关记录大部分依赖siki学院进行整理。12 一、认识unity引擎&#xff1f; 1、Unity相关信息&#xff1a; Unity的诞生&#xff1a;https://www.jianshu.com/p/550…

如何解决swagger-editor在线接口调试时的跨域问题

文章目录 一&#xff0c;序言二&#xff0c;问题重现1. 运行swagger-editor2. 运行接口服务3. 问题重现步骤 三&#xff0c;解决问题思路1. 去除浏览器安全限制2. 服务器接口统一处理3. 委托nginx转发 四&#xff0c;完整接口代码传送 一&#xff0c;序言 在 Docker 运行swagg…

提升 Python 执行速度:Codon、C/C++、Rust、Numba(JIT)、Taichi、Nuitka、MatxScript

几种流行的 Python 性能加速方案对比&#xff1a;https://zhuanlan.zhihu.com/p/604519817 对于一般通用场景用户&#xff0c;对性能没有那么强烈的诉求&#xff0c;紧跟官方步伐&#xff0c;升级到最新版本的 Python 既可&#xff0c;或者使用 PyPy。Numba、Codon、Taichi 等这…

电子画册真的好好用,制作也简单,都快来学学!

同纸质画册相比&#xff0c;电子画册无需受时间、空间、地域等限制&#xff0c;它通过手机、电脑即可发送文件&#xff0c;轻松实现在线浏览&#xff0c;使用起来更方便。 如何制作电子画册&#xff1f;这里同大家分享一下超简单的电子画册制作教程&#xff0c;0基础也能轻松上…

机器学习的医疗乳腺癌数据的乳腺癌疾病预测

项目视频讲解:基于机器学习的医疗乳腺癌数据的乳腺癌疾病预测 完整代码数据分享_哔哩哔哩_bilibili 效果演示: 代码: #第一步!导入我们需要的工具 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns %matplotlib inlin…

kubenetes-容器网络接口CNI

一、CNI Kubernetes 网络模型设计的基础原则是&#xff1a; 所有的Pod能够不通过NAT(网络地址转换)就能相互访问。所有的节点能够不通过NAT就能相互访问。容器内看见的IP地址和外部组件看到的容器IP是一样的。 Kubernetes的集群里&#xff0c;IP地址是以Pod为单位进行分配的…

IoC DI

Spring 的两大核心思想 : IoC 和 AOP 我们要将对象的控制权交给Spring ,我们就需要告诉 Spring 哪些对象是需要帮我们进行创建的,这里有两类注解可以实现 : 类注解(Controller Service Repository Component Configuration)和方法注解(Bean) 这五大注解都表示把这个对象交给…

2023-11-18 LeetCode每日一题(数位和相等数对的最大和)

2023-11-18每日一题 一、题目编号 2342. 数位和相等数对的最大和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的数组 nums &#xff0c;数组中的元素都是 正 整数。请你选出两个下标 i 和 j&#xff08;i ! j&#xff09;&#xff0c;且 nums[i] …

深入理解网络协议:通信世界的基石

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今数字化时代&#xff0c;网络协议是连接世…

Windows下安装RabbitMQ

1.安装Erlang 因为RabbitMQ是用Erlang语言编写的&#xff0c;所以在安装RabbitMQ之前需要先安装Erlang。 如果还未安装Erlang&#xff0c;官方下载安装包&#xff0c;点击Download Windows installer下载Erlang Downloads - Erlang/OTP 下载Erlang/OTP后&#xff0c;双击otp的…

JavaScript管理HTMLDOM元素(增删改查)

本文主要讲解JavaScript如何通过管理HTML上的DOM元素&#xff0c;其中包括如何查询、创建、修改以及删除具体功能和源码讲解。 增加 首先我们准备一个HTML框架和简单CSS样式&#xff0c;我对其中元素作用和关系进行一个简单说明。 <!DOCTYPE html> <html><he…

2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…

C#特性(Attribute)

C#特性&#xff08;Attribute&#xff09;是一种在程序中添加元数据的机制&#xff0c;它可以为代码提供额外的信息和指示。通过使用特性&#xff0c;我们可以为类、方法、属性等元素添加标记&#xff0c;以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…

计算机网络的体系结构

目录 一. 计算机体系结构的形成二. 协议与层次划分2.1 数据传输过程2.2 什么是网络协议2.3 网络协议的三要素2.4 协议有两种形式2.4 各层协议2.5 什么是复用和分用 \quad 一. 计算机体系结构的形成 \quad 计算机网络是一个非常复杂的系统, 相互通信的两个计算机系统必须高度协调…

二叉树中的深搜之二叉树的所有路径

257. 二叉树的所有路径 - 力扣&#xff08;LeetCode&#xff09; 对于二叉树的深度搜索&#xff0c;要学会从以下三个角度来去看待问题&#xff1a; 1. 全局变量&#xff0c;有时候全局变量会减少参数的个数&#xff0c;简化很多流程&#xff1b; 这道题目&#xff0c;要返回根…

linux配置固定ip(两种方法)

首先刚下载的vm&#xff0c;刚创建的虚拟机&#xff0c;肯定是需要配置ip的 其次以前我的每次都是设置自动ip&#xff0c;这样每次登录都会自动获取ip地址&#xff0c;并且每次的ip都不相同。 ~方法&#xff1a; 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…

vue3的Watch使用详解

vue官网提到&#xff1a; watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组&#xff1a; 1.监听单个Ref 2.监听一个getter函数 当然只修x或者y其中一个的值&#xff0c;…

LeetCode - 26. 删除有序数组中的重复项 (C语言,快慢指针,配图)

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路一&#xff1a;快慢指针 在数组中&#xff0c;快慢指针就是两个整数下标&#xff0c;定义 fast 和 slow 这里我们从下标1开始&#xff08;下标0的数据就1个&#xff0c;没有重复项&#xff09;&…

Java Web 实战 19 - What‘s HTTP ?

Whats HTTP ? 一 . HTTP 是什么 ?1.1 理解 HTTP 协议的工作过程1.2 HTTP 的报文格式1.2.1 准备工作1.2.2 认识 HTTP 协议的报文详情请求报文请求响应 二 . HTTP 请求报文2.1 URLURL 的 encode 2.2 HTTP 协议中的方法GETPOST常见面试题 : GET 和 POST 之间的区别 2.3 认识请求…