【vue】v-text,v-html渲染数据

这篇具有很好参考价值的文章主要介绍了【vue】v-text,v-html渲染数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • v-text
  • v-html

【vue】v-text,v-html渲染数据,JavaWeb,vue.js,html,java

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{web.title}}</h2>
        <h2 v-text="web.title"></h2>
        <h2 v-text="web.url"></h2>
        <h2 v-html="web.url"></h2>
    </div>

    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
            setup() {
                const web = reactive({
                    title: "tao355667",
                    url: "<i style='color:blue'>www.tao355667.com</i>"
                })

                return {
                    web
                }
            }
        }).mount("#app")
    </script>
</body>

</html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX文章来源地址https://www.toymoban.com/news/detail-850462.html

到了这里,关于【vue】v-text,v-html渲染数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant-design-vue中table组件使用customRender渲染v-html

    ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用,但是使用v-html发现不生效还报错 2、customRender函数返回肯定是jsx语法,于是发现这样写可以

    2024年02月15日
    浏览(37)
  • 怎么将拼接的字符串element组件通过“v-html“渲染到页面

    如上图所示,没那么多废话,直接上代码 html中 vue中

    2024年02月16日
    浏览(34)
  • 使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析

    使用v-html进行渲染如何使标签按照字符串显示,特殊样式标签(自己添加的部分)按照标签解析 需求:是内容里如果含有含有www.baidu.com这种链接高亮显示 解决办法: 首先拿到需要回显的内容content对内容进行转义escapeHTML,之后再去判断是否是链接进行高亮添加 代码如下

    2024年02月16日
    浏览(32)
  • Vue中v-html用法以及指令汇总

    操作数组的方法 : push:数组最后位置新增元素 pop:  删除最后一个元素 shift:  删除第一个元素 unshift:往前面加一个元素 splice:在数组的指定位置插入、删除、替换一个元素 sort:    数组排序 reverse:反转数组 我们学过的指令:     v-bind  : 单向绑定解析表达式,可简

    2024年02月16日
    浏览(36)
  • 【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行

    最近开发vue2 项目 ,接口返回的是类似于这样的数据: 我是第一行的哦n我是第二行的哦 我是直接这样渲染的, 但结果却是不如意,变成了下面这样 1.在使用 v-html 时添加样式,white-space:pre-wrap ,让浏览器保留空白和换行符。 2、用 pre 标签包裹 被包围在 pre 标签中的文本通常

    2024年02月14日
    浏览(27)
  • JavaWeb(3)——HTML、CSS、JS 快速入门

    • 赋值运算符( = ) • 一元运算符 (自增和自减,并明白区别) 众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符。而一元、二元和三元运算符是根据操作数(表达式)的个数来进行分类的。 一元运算符只需要一个操作数。

    2024年02月16日
    浏览(24)
  • JavaWeb(2)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 结构 💬 什么是BOM,什么是DOM?👭 BOM(浏览器对象模型 👨‍💻): DOM(文档对象模型 🏡): 总结下来就是 🌱  : 二、JavaScript 书写位置 🐟 三、JavaScript 注释 🔥 四、JavaScript 输入输出语法 🤖  五、JavaScript 变量 💎  六、JavaScript 变量命名 ✨

    2024年02月15日
    浏览(45)
  • JavaWeb(4)——HTML、CSS、JS 快速入门

     数组筛选(查找,将原来数组中的某些数据去除) 数组筛选(查找,数组中的最大和最小值) 数组修改(数组中每个元素末尾都加新元素)  数组修改(数组中每个元素开头都加新元素)  数组删除指定元素 冒泡排序 这段代码实现了一种冒泡排序算法: 首先,定义了一个

    2024年02月17日
    浏览(27)
  • JavaWeb(1)——HTML、CSS、JS 快速入门

            JavaWeb 是使用 Java 技术来构建 Web 应用程序的一种方法。         HTML(超文本标记语言,负责网页的结构)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,每个标签都有特定的功能。开发人员可以使用 HTML 来定义页面的结构、文本、图像、

    2024年02月15日
    浏览(30)
  • JavaWeb(5)——HTML、CSS、JS 快速入门

    目录 一、JavaScript 对象  二、JavaScriptBOM对象和DOM对象  三、JavaScript 事件监听 事件绑定 常见事件 案例练习  四、JavaScript 内存分配机制 五、JavaScript 函数作用域  六、JavaScript 函数构造器            所以说对象的赋值(也可以用这种方式查询)有两种方式,一个是 .

    2024年02月16日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包