v-html、v-text、v-bind等指令适用哪些标签？

首页课程实战体系课手记专栏慕课教程

来源：2-4 style样式绑定

A_醉夜

2021-09-23 16:55:58

在div标签中使用上述指令无法不能实现功能， p标签和a标签中可以正常使用！

写回答

1回答

好帮手慕小尤

2021-09-23

同学你好，适用于所有的标签，在div中是可以进行实现的，参考代码如下所示：同学可以进行测试。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            width: 300px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用v-text -->
        <div style="width: 300px;height: 200px;background: red;" v-text="msg" ></div>
        <!-- 使用v-html -->
        <div style="width: 300px;height: 200px;background: pink;" v-html="message"></div>
        <!-- 设置v-bind与绑定class -->
        <div v-bind:class = "{active:isActive}"></div>
    </div>

    <script src="./lib/vue.js"></script>

    <script>
        const app = {
            data () {
                return {
                    msg: '一个DIV',
                    message : "<h1>v-html:添加一个H1标签</h1>",
                    isActive : true
                }
            }
        }

        Vue.createApp(app).mount('#app');
    </script>
</body>
</html>

祝学习愉快！

0 学习 · 9886 问题

查看课程

相似问题

命名空间 'v-bind' 未绑定

回答 1

老师请检查，有关于等于与冒号的问题！

回答 1

a标签里href是不是也可以不用v-bind绑定?

回答 1

打开慕课网App查看更多内容