Vue指令详解：v-text、v-html与v-bind的实战应用-优快云博客

本文链接：https://blog.youkuaiyun.com/hangnan315/article/details/118103674

Vue指令第一期

指定是Vue模板中最常用的一项功能，是以v-开头的自定义标签属性。

1.1 v-text

想要将data中的数据显示在页面中，除了使用双大括号{{}}来进行插值外，还可以使用v-text

new Vue({
el:"#app",
data : {
message : “今天天气不错”
}
})

v-text和插值表达式{{ }}的区别

v-text会覆盖元素中原本的内容，插值表达式{{ }}只会替换自己的这个占位符，不会把整个元素内容替换

v-text和v-html的区别
不会解析msg中的HTML代码。

1.2 v-html

如果我们想要页面去解析数据中的HTML代码，则可以使用v-html指向。

1.3 v-bind

作用：动态更新HTML元素上的属性。比如：ID，class，href，src等

格式：v-bind:属性名称="绑定的数据"

v-bind的使用格式使用语法糖的写法如下：

:属性名称="绑定的数据"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #app{
    text-align: center;
  }
  .pink{
    color: pink;
  }
</style>
<body>
  <div id="app">
    <p v-text="count"></p>
    <p v-html="count" :class="msg"></p>
    <h1 :title="data">
      看我实现的效果
    </h1>
    <img :src="url">
  </div>
  <script src="./js/vue.min.js"></script>
  <script>
    let vue = new Vue({
      el:"#app",
      data:{
        msg:"pink",
        count:"<h2>如果我爱你</h2>",
        url:"./img/2.jpg",
        data:"效果来了"
      }
    })
  </script>
</body>
</html>