插值{{ }} 和 v-html

本节开始,我们按如下顺序学习vue模板API-指令。点击各部分的DEMO可在线查看代码

  • 输出字符串文本内容的插值:{{}}
  • 输出HMTL元素作为内容的指令:v-html
  • 绑定元素可见性的指令:v-if/elsev-show
  • 创建列表元素的指令:v-forkey作用
  • 绑定元素特性的指令:v-bind 及其参数
  • 绑定元素事件的指令:v-on 及其参数和修饰符
  • 实现表单元素值双向绑定的指令:v-model

内容 => {{}}

{{ }}插值,即Mustache语法,严格来说不纳入vue指令系统中。但自己方便知识归纳的统一性,估且算作指令一部分。所以插值的{{}}双括号写法只适用于元素内容的部分,不能用作元素特性中。

Mustache插值包裹的值可以是具体的值,也可以是简单运算的表达式。依赖的值发生了改变,插值处的内容都会更新。
{{ value OR expression }}

DEMO 插值{{}}和v-html

<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

vue-learning:3-template-{{}}-and-v-html的更多相关文章

  1. vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  2. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  3. Vue系列:如何将百度地图包装成Vue的组件

    主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...

  4. Vue.js:安装

    ylbtech-Vue.js:安装 1.返回顶部 1. Vue.js 安装 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入 ...

  5. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  6. Deep learning:四十六(DropConnect简单理解)

    和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...

  7. Vue.js:轻量高效的前端组件化方案(转载)

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  8. 转载 Deep learning:六(regularized logistic回归练习)

    前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...

  9. 组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...

  10. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)

    前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...

随机推荐

  1. pl/sql基础知识—pl/sql块介绍

    n  介绍 块(block)是pl/sql的基本成型单元,编写pl/sql程序实际上就是编写pl/sql块.要完成相对简单的应用功能,可能只需要编写一个pl/sql块:但是如果要想实现复杂的功能,可能 ...

  2. lower_bounder()和upper_bound()的函数

    lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...

  3. Android Binder简介

    Android使用Linux的进程管理机制,以进程为单位分配虚拟地址空间.为了安全考虑,Android的不同进程之间是相互隔离的(进程之间被禁止直接交互).如果进程间需要通信,必须通过Android的 ...

  4. android 重写系统进度条

    转载自http://blog.csdn.net/codingandroid/article/details/8495074 自定义progressbar现在要自定义一个等待的时候转动的小圈,相信大家也 ...

  5. python 常见包中的不定参数

  6. docker保存容器的修改

    docker保存容器修改 通过在容器中运行某一个命令,可以把对容器的修改保存下来, 这样下次可以从保存后的最新状态运行该容器.docker中保存状态的过程称之为committing, 它保存的新旧状态 ...

  7. LeetCode120 Triangle

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  8. Spring Security 的登录密码验证过程 UsernamePasswordAuthenticationFilter

    认证过程如下 一.先判断请求(请求必须是post请求)地址是否为配置的 login-processing-url 值(默认/j_spring_security_check),如果不是,则放行,进入下一 ...

  9. python 列表索引

  10. Java练习 SDUT-1253_进制转换

    进制转换 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入一个十进制数N,将它转换成R进制数输出. Input 输入 ...