宋浩志的博客

宋浩志的博客

马上订阅 宋浩志的博客 RSS 更新: https://songhaozhi.com/atom.xml

vue学习笔记二模板语法

2022年9月2日 18:23

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

1
<span>Message: {{ msg }}</span>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
<span> Message：{{msg}}</span>
</template>

<script>
export default {
  name:"text",
  data(){
    return{
        msg:"消息提醒"
    }
  }
}
</script>

原始 HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
    <div>
        <p>插值方式：{{rawHtml}}</p>
        <p >HTML方式:<span v-html="rawHtml"></span></p>
    </div>
</template>

<script>
export default{
    name:"RawHtml",
    data(){
        return {
        rawHtml:"<a href='http://www.baidu.com'>百度</a>"
    }
   }
}
</script>

Attribute 绑定

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

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

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

简写

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

开头为 : 的 attribute 可能和一般的...

剩余内容已隐藏

查看完整文章以阅读更多
查看完整文章