vue之v-text、v-html及v-on标签基本使用

最新推荐文章于 2024-08-07 22:13:00 发布

兮动人

最新推荐文章于 2024-08-07 22:13:00 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue v-text v-html v-on v-on基础

本文链接：https://blog.csdn.net/qq_41684621/article/details/113755237

版权

Vue 专栏收录该内容

30 篇文章 24 订阅

订阅专栏

本文介绍了Vue.js中v-text用于设置文本值的用法，v-html处理innerHTML的特性，并通过实例展示了如何为元素绑定基本事件。通过对比v-text和v-html在内容呈现上的区别，读者将掌握Vue组件中这两者的基本运用。

摘要由CSDN通过智能技术生成

文章目录

本地应用

本地应用

在这里插入图片描述

1. v-text：设置标签的文本值

在这里插入图片描述

<body>
    <div id="app">
        <h2>{{ message }} xdr630</h2>
        <h2 v-text="message">xdr630</h2>
        <h2 v-text="info">xdr630</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            message: 'hello,vue',
            info: "你好,vue"
            }
        })
    </script>
</body>

在这里插入图片描述

可以看出 v-text 不能显示出后面的内容，,v-text会覆盖元素中原来的内容，但是插值表达式 （{{ }}）只会替换自己的这个占位符，不会把整个元素的内容给清空
同时v-text 表达式也支持字符串的拼接，如：

<h2>{{ message+'!!' }} xdr630</h2>
<h2 v-text="message+'!!'">xdr630</h2>
<h2 v-text="info+'!!'">xdr630</h2>

在这里插入图片描述

2. v-html：设置标签的innerHTML

在这里插入图片描述

案例：v-text和v-html输入内容比较

<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            // content: "你好",
            content: "<a href='https://xdr630.blog.csdn.net/' target='_blank'>兮动人</a>",
            }
        })
    </script>
</body>

在这里插入图片描述

3. v-on基础：为元素绑定事件

在这里插入图片描述

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{ food }}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
        el: '#app',
        data: {
            food: "番茄炒鸡蛋"
            },
            methods: {
                doIt: function () {
                    alert("做It");
                },
                changeFood: function () {
                    console.log(this.food)
                    this.food+="好好吃!";
                }
            }
        })
    </script>
</body>