innerText和innerHTML以及v-bind

最新推荐文章于 2022-08-03 00:01:56 发布

night_du

最新推荐文章于 2022-08-03 00:01:56 发布

阅读量2.2k

点赞数

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44119864/article/details/103552809

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

innerHTML：设置或返回表格行的开始和结束标签之间的 HTML

innerText：设置文本的，甚至标签内容，是没有标签的效果的

Vue.js v-bind ：在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组

案例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>

<div id="app">
    <!--传统js和vue的innerText、innerHTML-->
    <div id="div1"></div>
    <div id="div2"></div>
    <div v-html="messageHtml"></div>
    <div v-text="messageText"></div>
    <br/>
    <br/>
    <!-- v-bind-->
    <!--    插值表达式不能用于html标签的属性取值
            要想给html标签的属性设置变量的值，需要使用v-bind
            v-bind:  ==  ：
   -->
    <font size="5" v-bind:color="ys1">完整v-bind</font>
    <br/>
    <font size="5" :color="ys2">简写v-bind</font>

</div>
</body>
<script>

    new Vue({
        el: "#app",
        data: {
            messageHtml: "<h1>vue   innerHTML</h1>",
            messageText: "<h1>vue   innerText</h1>",
            ys1: "red",
            ys2: "green"
        }
    });
    window.onload = function () {
        document.getElementById("div1").innerHTML = "<h1>js  innerHTML</h1>"
        document.getElementById("div2").innerText = "<h1>js  innerText</h1>"
    }
</script>
</html>

效果：
在这里插入图片描述

night_du

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
innerText和innerHTML以及v-bind

innerHTML：设置或返回表格行的开始和结束标签之间的 HTMLinnerText：设置文本的，甚至标签内容，是没有标签的效果的Vue.js v-bind ：在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组案例<!DOCTYPE html><html lang="en" xmlns:v-on="http://...
复制链接

扫一扫