vue-learning：3-template-{{}}-and-v-html
2024-09-04 21:00:33
插值{{ }} 和 v-html
本节开始，我们按如下顺序学习vue模板API-指令。点击各部分的DEMO可在线查看代码
- 输出字符串文本内容的插值：
{{}} - 输出HMTL元素作为内容的指令：
v-html - 绑定元素可见性的指令：
v-if/else，v-show - 创建列表元素的指令：
v-for及key作用 - 绑定元素特性的指令：
v-bind及其参数 - 绑定元素事件的指令：
v-on及其参数和修饰符 - 实现表单元素值双向绑定的指令：
v-model
内容 => {{}}
{{ }}插值，即Mustache语法，严格来说不纳入vue指令系统中。但自己方便知识归纳的统一性，估且算作指令一部分。所以插值的{{}}双括号写法只适用于元素内容的部分，不能用作元素特性中。
Mustache插值包裹的值可以是具体的值，也可以是简单运算的表达式。依赖的值发生了改变，插值处的内容都会更新。
{{ value OR expression }}
<div id="app">
<p>{{ str }}</p>
<p>{{ number }}</p>
<p>{{ arr[1] }}</p>
<p>{{ obj.num }}</p>
<p>{{ arr[1] + obj.num }}</p>
<p>{{ result }}</p>
<p>{{ sum(arr[1], obj.num) }}</p>
<p>{{ Boolean(obj.num) }}</p>
</div>
new Vue({
el: "#app",
data: {
str: "abc",
number: 888,
arr: [1,2,3],
obj: {
num: 4
},
},
computed: {
result() {return this.arr[1] + this.obj.num}
},
methods: {
sum(a, b) {return a + b}
}
})
abc
888
2
4
6
6
6
true
{{ }}插值只会将数据渲染输出为普通文本字符，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。
<div id="app">
<div>{{ message }}</div>
<div v-html="message"></div>
</div>
new Vue({
el: "#app",
data: {
message: "<span>example</span>"
}
})
<span>example</span>
example
最新文章
- C#中ToString()格式详解
- Sublime Text 3 常用插件以及安装方法(转)
- Design Tip #142 Building Bridges
- Javascript基础系列之（一）JavaScript语法
- SQL单表查询
- python中yield用法
- 学习lamda表达式
- 【Android - MD】之RecyclerView的使用
- Spring MVC + Spring MongoDB + Querydsl 通过maven整合实例
- hdu2059 龟兔赛跑
- 深入理解GCD ( 二 )
- 从ICassFactory为CLSID为{17BCA6E8-A950-497E-B2F9-AF6AA475916F}的COM组件创建实例失败，原因是出现以下错误：c001f011.(Microsoft.Server.manageDTS
- 胜利大逃亡(续)（bfs+状态压缩）
- GCC 中的编译器堆栈保护技术
- 【转】three.js详解之入门篇
- centos6.5安装禅道
- CopyOnWriteArrayList你都不知道，怎么拿offer？
- 【大数据系列】节点的退役和服役[datanode,yarn]
- mysql创建utf8数据库
- starshot常见问题（New）