模板语法

官方文档：https://v3.cn.vuejs.org/guide/template-syntax.html#attribute

现在有一段代码：

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h2>{{job}}</h2>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-林之灵"
        }
    })
</script>

页面渲染如下：
image.png

v-text

之前是使用{{title}} 来传递data中的值，现在可以使用v-text指令来代替，两者等价。

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-林之灵"
        }
    })
</script>
  • 13、15两行使用v-text 同样能达到传递data中值的效果

访问页面：
image.png

v-html

如果我们想对data中的数据中的某一部门用类似于<em> 标签进行突出：

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-<em>林之灵<em>"
        }
    })
</script>
  • 第24行字符串中加入斜体标签

访问页面：
image.png
可以看到标签并不能被识别渲染，这时候就是v-html发挥作用的时候了。

使用v-html：

<h2 v-html="job"></h2>

访问页面：
image.png
可以看出v-html="data值" 即可将值中的标签进行渲染出来。

通过v-html也可以实现更多的样式渲染：

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
        <h2 v-html="job"></h2>

    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-<em style='color:red'>林之灵<em>"
        }
    })
</script>
  • 第26行在em标签中添加了css样式

访问页面:
image.png

v-text,v-html对比jQuery中的应用

v-texty类似于jQuery中的.text(),可以更改元素内容，但是不能将其中的标签渲染出来，只是变成普通的字符串。
v-html类似于jQuery中的.html() ,可以将其中的标签渲染出来，实现标签效果。

v-bind(重要)

v-bind作用：绑定标签中的属性，执行js中的内容，比如将data中的值传入属性中。
官方文档：https://v3.cn.vuejs.org/guide/template-syntax.html#%E6%8C%87%E4%BB%A4

title属性绑定实验

标签的title属性作用是当鼠标移至对象上时，出现提示文字

如：

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
        <h2 v-html="job"></h2>
        <hr>
        <h3 title="我的世界">我的世界</h3>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-<em style='color:red'>林之灵<em>",
            des: "minecraft"
        }
    })
</script>

访问页面：
image.png

现在要实现，当光标移动至我的世界元素上时，出现的文字提示变为data中的des对应的minecraft

这时候使用v-bind来绑定title属性，再传递des的值:

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
        <h2 v-html="job"></h2>
        <hr>
        <h3 title="我的世界" v-bind:title="des">我的世界</h3>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-<em style='color:red'>林之灵<em>",
            des: "minecraft"
        }
    })
</script>
  • 第18行：使用v-bind来绑定title属性，并且值为des中的值

image.png

注意

<h3 title="我的世界" v-bind:title="des">我的世界</h3> 中的title="我的世界" 和v-bind:title="des" 顺序不能前后颠倒，因为这里的title属性最终的值以谁排在后面为准，后面的会覆盖前面的。

因此前面的 title="我的世界" 可以直接省略不写，因为会被后面的覆盖。

link属性绑定实验

<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <h1 v-text="title"></h1>
        <h2>{{job}}</h2>
        <h2 v-text="job"></h2>
        <h2 v-html="job"></h2>
        <hr>
        <h3 v-bind:title="des" title="我的世界" >我的世界</h3>
        <hr>
        <a v-bind:href="link">我的博客</a>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛",
            job:"法师-<em style='color:red'>林之灵<em>",
            des: "minecraft",
            link:"https://www.justinwuwei.cn"
        }
    })
</script>

  • 20行使用v-bind 来绑定a标签的href属性为data中的link值

    img属性绑定实验

    <!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>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
      <h1>{{title}}</h1>
      <h1 v-text="title"></h1>
      <h2>{{job}}</h2>
      <h2 v-text="job"></h2>
      <h2 v-html="job"></h2>
      <hr>
      <h3 v-bind:title="des" title="我的世界" >我的世界</h3>
      <hr>
      <a v-bind:href="link">我的博客</a>
      <hr>
      <img v-bind:src="piclink" alt="">
  </div>
</body>
</html>
<script>
  new Vue({
      el:"#app",
      data:{
          title:"冒险岛",
          job:"法师-<em style='color:red'>林之灵<em>",
          des: "minecraft",
          link:"https://www.justinwuwei.cn",
          piclink:"http://tu.eagleslab.com/images/2021/03/23/5a638e37c2073daecfbd650bb013e8f4.jpg"
      }
  })
</script>
  • 22行v-bind 绑定src传值

v-bind简写

官方文档：https://v3.cn.vuejs.org/guide/template-syntax.html#v-bind-%E7%BC%A9%E5%86%99

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

直接省略v-bind，保留一个“:”即可。
例如：

<!-- 完整语法 -->
<img v-bind:src="piclink" alt="">

<!-- 缩写 -->
<img :src="piclink" alt="">
最后修改：2024 年 03 月 13 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏