Vue入门详解之模板语法插值表达式,v-html和v-text

我们来看一下简单的模板语法,在Vue中有三种模板语法用来渲染model(数据层),插值表达式(就是{{}},双花括号表达法),v-text和v-html三种!那么这三种有什么区别哪?我们先简单看一个实例!

<div id="app">
    <span>{{desc}}</span>
    <span v-html="desc"></span>
    <span v-text="desc"></span>

</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            desc:"你好世界,hello world!",
            tpl:`<h1> 哈哈哈哈,Vue!  模板语法!!!</h1>`,
        }
    })
</script>

看一下运行效果

发现三种方式都能正确去渲染页面!

其实这三者还是有区别的,那么我们接下来再看一个例子

<div id="app">
    <span>{{tpl}}</span>
    <span v-html="tpl"></span>
    <span v-text="tpl"></span>

</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            tpl:`<h1> 哈哈哈哈,Vue!  模板语法!!!</h1>`,
        }
    })
</script>

发现我们渲染的数据如果是hml语法,通过v-html是可以直接解析出来的,而插值表达式和v-text只是当做字符串处理的!根据实际问题可以到时候选择相应的模板语法进行渲染!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

JS魔法堂:元素克隆、剪切技术研究

一、前言                                     当需要新元素时我们可以通过 document.createElement 接口...

1805
来自专栏Nian糕的私人厨房

Emmet 常用语法

Emmet 是一个能大幅度提高前端开发效率的一个工具,通过在编辑器中输入 HTML 或 CSS 的代码缩写,按 Tab 键即可拓展为完整的代码片段,本文主要...

833
来自专栏Android先生

Android开发人员不得不学习的JavaScript基础(二)

window对象是BOM的核心,window对象指当前的浏览器窗口,window对象中有很多种方法供开发者调用:

1053
来自专栏HTML5学堂

JS简单页面交互实战 - 点击按钮实现求和功能

上一期堡堡给大家讲解了简单的页面交互效果 - 点击块,让块动起来,让我们更清晰的了解JS逻辑和DOM的结合。如果想具体了解点击块,让块动起来,可以回复“交互”到...

4828
来自专栏我的博客

jade模板学习

1、Jade中,空格、换行、缩进都是有意义的,由这些决定了标签和内容的嵌套关系。 2、jade模板中不需要结束标签,它用缩进表示标签间的嵌入关系。 3、span...

3424
来自专栏软件开发

前端MVC Vue2学习总结(四)——条件渲染、列表渲染、事件处理器

一、条件渲染 1.1、v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if...

52211
来自专栏Golang语言社区

golang(Go语言) byte/[]byte 与 二进制形式字符串 互转

效果 把某个字节或字节数组转换成字符串01的形式,一个字节用8个”0”或”1”字符表示。比如: byte(3) –> “00000011” []byte{1...

4797
来自专栏菜鸟计划

vue组件详解(二)——使用props传递数据

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是...

9808
来自专栏搞前端的李蚊子

vue.js使用props在父子组件之间传参

本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要...

3154
来自专栏WindCoder

mybatis在xml文件中处理大于号小于号的方法(mybatis大于小于的转义)

SELECT * FROM test WHERE 1 = 1 AND start_date  &lt;= CURRENT_DATE AND end_date &...

1221

扫码关注云+社区

领取腾讯云代金券