2、模板语法

目录

1、v-html

2、v-bind

Attribute 绑定

简写​

动态属性

3、v-on

---

1、v-html

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。

<script>
export default {
  data() {
    return {
      num: 0,
      uname: "张三",
      rawHtml: "<h1>html内容</h1>"
    }
  }
}

</script>

<template>
  <div>
    <p v-html="rawHtml"></p>
    <div v-html="rawHtml"></div>
  </div>


</template>

<style scoped>
header {
  line-height: 1.5;
}

header .wrapper {
  display: flex;
  place-items: flex-start;
  flex-wrap: wrap;
}

</style>

2、v-bind

Attribute 绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

简写​

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>

<script>
export default {
  data() {
    return {
      num: 0,
      uname: "张三",
      rawHtml: "<h1>html内容</h1>",
      attributeName:"rid"
    }
  }
}

</script>

<template>
  <div>
    <p v-html="rawHtml"></p>
    <div v-html="rawHtml"></div>
    <p :id="attributeName">v-bind属性绑定</p>
  </div>


</template>

<style scoped>
header {
  line-height: 1.5;
}

header .wrapper {
  display: flex;
  place-items: flex-start;
  flex-wrap: wrap;
}
#rid{
  color: red;

}

</style>

动态属性

JavaScript 表达式变量渲染，不要写死属性value值

<script>
export default {
  data() {
    return {
      num: 0,
      uname: "张三",
      rawHtml: "<h1>html内容</h1>",
      attributeNames:"rid",
      attributeName:"href",
      url:"http://pic.5tu.cn/uploads/allimg/1002/071628278150.jpg"
    }
  }
}

</script>

<template>
  <div>
    <p v-html="rawHtml"></p>
    <div v-html="rawHtml"></div>
    <p :id="attributeNames">v-bind属性绑定</p>

    <a v-bind:[attributeName]="url">动态属性</a>
  </div>


</template>

<style scoped>
header {
  line-height: 1.5;
}

header .wrapper {
  display: flex;
  place-items: flex-start;
  flex-wrap: wrap;
}
#rid{
  color: red;

}
#ids{
  color: blue;
}

</style>

3、v-on

v-on 指令，它将监听 DOM 事件：

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>