vue-learning:3-template-{{}}-and-v-html
插值{{ }} 和 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
vue-learning:3-template-{{}}-and-v-html的更多相关文章
- 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 ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- Vue系列:如何将百度地图包装成Vue的组件
主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...
- Vue.js:安装
ylbtech-Vue.js:安装 1.返回顶部 1. Vue.js 安装 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入 ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- Deep learning:四十六(DropConnect简单理解)
和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...
- Vue.js:轻量高效的前端组件化方案(转载)
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- 转载 Deep learning:六(regularized logistic回归练习)
前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...
- 组件嵌套时报: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组件的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
随机推荐
- pl/sql基础知识—pl/sql块介绍
n 介绍 块(block)是pl/sql的基本成型单元,编写pl/sql程序实际上就是编写pl/sql块.要完成相对简单的应用功能,可能只需要编写一个pl/sql块:但是如果要想实现复杂的功能,可能 ...
- lower_bounder()和upper_bound()的函数
lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...
- Android Binder简介
Android使用Linux的进程管理机制,以进程为单位分配虚拟地址空间.为了安全考虑,Android的不同进程之间是相互隔离的(进程之间被禁止直接交互).如果进程间需要通信,必须通过Android的 ...
- android 重写系统进度条
转载自http://blog.csdn.net/codingandroid/article/details/8495074 自定义progressbar现在要自定义一个等待的时候转动的小圈,相信大家也 ...
- python 常见包中的不定参数
- docker保存容器的修改
docker保存容器修改 通过在容器中运行某一个命令,可以把对容器的修改保存下来, 这样下次可以从保存后的最新状态运行该容器.docker中保存状态的过程称之为committing, 它保存的新旧状态 ...
- LeetCode120 Triangle
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
- Spring Security 的登录密码验证过程 UsernamePasswordAuthenticationFilter
认证过程如下 一.先判断请求(请求必须是post请求)地址是否为配置的 login-processing-url 值(默认/j_spring_security_check),如果不是,则放行,进入下一 ...
- python 列表索引
- Java练习 SDUT-1253_进制转换
进制转换 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入一个十进制数N,将它转换成R进制数输出. Input 输入 ...