vue中点击插入html_Vue中插入HTML代码的方法

我们需要吧

Hello World

插入到

My name is Pjee

应该如何做?

一、使用v-html

v-html:更新元素的 innerHTML

const text = `

Hello World>`

My name is Pjee

注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

二、渲染函数

渲染函数:这是通过对VNode(虚拟DOM)的操作来生成

text(){

render:(h)=>{

h(

'div',

[

h('p', 'Hello'),

' world!'

]

)

}

}

Hello World{{this.text()}}

三、JSX

JSX:这个方法在React使用最为广泛,但是Vue中使用需要安装Babel插件

text(){

return (

Hello World

)

}

Hello World{{this.text()}}

四、domPropsInnerHTML

domPropsInnerHTML:如果说JSX在vue很少用到,那么这个东西就更少有人使用到了

如果现在还有一段

How are you?

需要我们插入到Hello World中,我们就可以使用这种方法

const newText = '

How are you?

'

text(){

return (

Hello World

)

}

Hello World{{this.text()}}

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

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

相关文章

进程共享变量#pragma data_seg用法

#pragma data_seg介绍用#pragma data_seg建立一个新的数据段并定义共享数据,其具体格式为:   #pragma data_seg ("shareddata")   HWND sharedwndNULL;//共享数据   #pragma data_seg() ---------------------------------…

机器视觉Halcon教程(1.介绍)

前言本期教程主要教大家如何使用Halcon机器视觉,通过使用Halcon, 我们可以实现一些机器视觉的应用开发。例如: OCR识别、视觉定位、缺陷检测等内容。什么是halcon?简单来说, Halcon就是一款应用于机器视觉的软件,它提供了一套开发工具&#x…

网络时间的那些事及 ntpq 详解

2019独角兽企业重金招聘Python工程师标准>>> GMT (Greenwich Mean Time)格林威治时间 UTC (Coordinated Universal Time) 协调世界时 IAT (International Atomic Time),TAI 国际原子时 CST (Chinese Standard Time), 北京时间Gentoo(也许其他发行版也是&…

【前端芝士树】Javascript的原型与原型链

【前端芝士树】Javascript的原型、原型链以及继承机制 前端的面试中经常会遇到这个问题,自己也是一直似懂非懂,趁这个机会整理一下0. 为什么会出现原型和原型链的概念 1994年,网景公司(Netscape)发布了Navigator浏览器…

神奇的幻方2015提高组d1t1

题目描述 幻方是一种很神奇的N*N矩阵:它由数字1,2,3,……,N*N构成,且每行、每列及两条对角线上的数字之和都相同。 当N为奇数时,我们可以通过以下方法构建一个幻方: 首先将1写在第一行的中间。 之后,按如下方式从小到大…

goldengate mysql_使用GoldenGate实现MySQL到Oracle的数据实时同步

step 1: 配置mysql修改配置文件my.ini#for goldengatelog-bin "C:/mysql/logbin/logbin.log"binlog-format ROWlog-bin-index "C:\mysql\logindex"binlog_cache_size32mmax_binlog_cache_size512mmax_binlog_size512m添加数据库用户ggs,具有…

C# 反射之Activator用法举例

概述程序运行时,通过反射可以得到其它程序集或者自己程序集代码的各种信息,包括类、函数、变量等来实例化它们,执行它们,操作它们,实际上就是获取程序在内存中的映像,然后基于这个映像进行各种操作。Activa…

MyBatis批量插入

转载于:https://blog.51cto.com/12701034/1929672

狐狸文│区块链发展的正路

(图片出自网络,版权归原作者所有)最近看了一本书:《美国增长的起落》。这本书是大部头,但看起来很过瘾。通过对这本书的阅读,我更新了自己对区块链发展的理解。这一年,“区块链”很热&#xff0…

mysql 一主一备_Mysql一个主一备

Mysql主从复制 -- 一主一备主从复制原理:Mysql的主从复制是mysql本身自带的一个功能,不需要额外的第三方软件可以实现,其复制功能并不是copy文件实现的,而是借助binlog日志文件里面的SQL命令实现的主从复制,可以理解为…

解决安装Weblogic domain卡住问题(Primeton BPS)

这两天一直有一个问题困扰我,在suse10weblogic(920,923,100,103)上安装bpm产品失败。有些版本是创建domain的时候卡在create security information上,有些版本卡在安装包start weblogic上。但是在winXPweblogic10.3bpm安装成功。 经过几番GOOGLE,终于找到…

cocos2d-js 热更新具体解释(一)

本文将会具体解说cocos2d-js下的热更新机制。这篇内容先给大家介绍一下两个manifest文件就当热身了。首先介绍project.manifest: 举个样例 {"packageUrl" : "http://192.168.1.108/games/dragon_gold","remoteManifestUrl" : "…

Qt之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)

简述 QBoxLayout可以在水平方向或垂直方向上排列控件,由QHBoxLayout、QVBoxLayout所继承。 QHBoxLayout:水平布局,在水平方向上排列控件,即:左右排列。 QVBoxLayout:垂直布局,在垂直方向上排列控…

Optaplanner终于支持多线程并行运行 - Multithreaded incremental solving

Optaplanner 7.9.0.Final之前,启动引擎开始对一个Problem进行规划的时候,只能是单线程进行的。也就是说,当引擎对每一个possible solution进行分数计算的过程中,细化到每个步骤(Caculation),都只能排队在同一个线程中依…

python棋盘格_干货必看 | Python的turtle库之经典棋盘格

国际棋盘格是一个由9横9纵的线组成的格子正方形,用Python的turtle库进行绘制的时候,先做9横9纵的线,再填上灰色小正方形,这就可以完成一个棋盘格了,下面是具体的操作步骤。(一)整体代码1、import turtleimport turtle2…

一位技术老人给.NET初学者的一些建议

.NET平台应用领域众多,随着这些年的不断更新迭代,日趋臻善,也受到越来越多的开发者青睐。自从2000 年6 月22 日 微软推出Microsoft.NET 战略 ,至今已有22载,这些年新技术,新框架层出不穷,目不暇…

android 本地数据库sqlite的封装

单机android sqlite数据库的实现,这个数据库可与程序一起生成在安装包中一、下载sqlite3.exe文件二、运行 cmd 转到sqlite3.exe 所在目录 运行 sqlite3.exe 数据库名.db然后会出现sqlite>的命令提示符输入创建表的语句, create table 表名&#xf…

ResourceManager中的Resource Estimator框架介绍与算法剖析

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 本文由宋超发表于云社区专栏 本文首先介绍了Hadoop中的ResourceManager中的estimator service的框架与运行流程,然后对其中用到的资源估算算法进行了原理剖析。 一. Resource Estimator Service…

几十款 WPF 控件 - UI 库,总有一款适合你

几十款 WPF 控件 - UI 库,总有一款适合你独立观察员 2022 年 10 月 16 日引言众所周知,使用 WPF 框架能够开发出功能强大、界面美观的桌面端应用。能够达到这个效果,各种 WPF 的控件库、UI 库功不可没。所以,想着能不能收集一下目…

mysql将系统权限授予用户_mysql创建用户并授予权限

1、create schema [数据库名称] default character set utf8 collate utf8_general_ci;--创建数据库采用create schema和create database创建数据库的效果一样。2、create user ‘[用户名称]‘‘%‘ identified by ‘[用户密码]‘;--创建用户密码8位以上,包括&#…