3、Vue指令v-html、v-text

最新推荐文章于 2024-05-06 20:52:53 发布

zjh的学习乐园

最新推荐文章于 2024-05-06 20:52:53 发布

阅读量333

点赞数 1

分类专栏： vue基础文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_46841213/article/details/115391675

版权

vue基础专栏收录该内容

25 篇文章 2 订阅

订阅专栏

Vue指令v-html、v-text

1、初识Vue指令
2、v-html
- 3、v-text

1、初识Vue指令

Vue指令（Directives）通常是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性，它们都是以”v-”开头，并且一些特殊的指令可以带参数和修饰符。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

2、v-html

v-html：相当于 innerHTML 。内容按普通 HTML 插入，不会作为 Vue 模板进行编译。
注意：小心XXS攻击，在可信内容上使用v-html，拒绝用户交互下使用该指令。

<body>
    <div id="app"  v-html="title">
    
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                title:"the first Vue",
                name:'zhangjianhua'
            }
        })
    </script>
</body>

在这里插入图片描述

3、v-text

v-text：相当于 textContent 。
注意：v-text会替换元素中所有的文本，插值表达式只替换自己，不会清空元素。优先级比插值表达式高。

<body>
    <div id="app">
        <!-- 将data数据渲染在页面上 -->
        <h3 v-text="dec"></h3>
        <!-- javascript逻辑运算，注意111也要加上'' -->
        <h3 v-text="dec + '111' "></h3>
        <!-- 三目运算符 -->
        <h3 v-text="1>2 ? '大于' : '小于' "></h3>
        <!-- 变量拼接，变量与字符串拼接，得加双引号 -->
        <h3 v-text="dec + dec"></h3>
        <!-- 在v-text标签中添加内容 -->
        <p v-text="dec">
            变量是dec
        </p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                dec:"hello v-text"
            }
        })
    </script>
</body>

在这里插入图片描述

zjh的学习乐园

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
3、Vue指令v-html、v-text

Vue指令v-html、v-text1、初识Vue指令2、v-html3、v-text1、初识Vue指令Vue指令（Directives）通常是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性，它们都是以”v-”开头，并且一些特殊的指令可以带参数和修饰符。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。2、v-htmlv-html：相当于 innerHTML 。内容按普通 HTML 插入，不会作为 Vue 模板进行编译。注意：小心XXS攻击，在可信内
复制链接

扫一扫