5.Vue学习-v-html和v-bind指令学习

微风

2021 年 02 月 18 日

1517 次浏览

暂无评论

1233字数

Vue

1. 对于v-html，是我们可以把data中的数据，通过html的方式渲染到页面上，而不是直接将文本内容显示在界面上。

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>模板语法</title>
</head>
<body>
  
    <div id="app">
        <h1 v-once>{{title}}</h1>
        <!-- 也可以使用v-text进行渲染文本 -->
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
        <!-- v-html可以将data中值渲染到html中 -->
        <h2 v-html="job"></h2>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                title: "Vue学习",
                job: "web<em style='color:red'>前端</em>开发",
            }
        })
    </script>

</body>
</html>

1.2 显示效果

2.关于v-bind指令，我们可以对标签属性的值进行绑定。其效果等同于直接给属性值，但是这样复制是动态的，而直接给值则是把数据写死在了那个地方

2.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>模板语法</title>
</head>
<body>
  
    <div id="app">
        <!--v-bind学习-->
        <!-- 将鼠标放在文字上面会显示一段文字 -->
        <h3 title="Vue学习笔记">Vue学习笔记</h3>
        <!-- 如果我们想要替换title中的值，直接像下面这样用是不行的 -->
        <h3 title="dec">Vue学习笔记</h3>
        <!-- 我们需要通过v-bind去绑定title值 -->
        <h3 v-bind:title="dec">Vue学习笔记</h3>
        <!-- 跳转到我的博客 -->
        <a v-bind:href="link">跳转到我的博客</a>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                dec: "这里是一大段描述！！！！！！！！！",
                link: "https://www.luocome.cn"
            }
        })
    </script>

</body>
</html>