<vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak
代码结构
一、 Mustache
1、效果
展示如何将数据展示在页面上
2、代码
01-Mustache.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Mustache</title>
</head>
<body> <div id="app">
<h2>Hello {{message}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + '-----'+lastName}}</h2>
<h2>{{number * 2}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'World',
firstName: '张',
lastName: '三',
number: 10
}
})
</script> </body>
</html>
二、 v-once
1、 效果
说明：当值改变时使用了v-once标签的数据并没有随之改变。
2、代码
02-v-once.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-once</title>
</head>
<body> <div id="app">
<h2 v-once>{{message}}</h2>
<h2>{{message}}</h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '今天天气不错!'
}
})
</script> </body>
</html>
三、v-html
1、效果
按照HTML格式进行解析，并且显示对应的内容
1、 代码
03-v-html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-html</title>
</head>
<body> <div id="app">
<div>{{href}}</div>
<div v-html="href"></div>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
href: '<a href="https://www.baidu.com">百度一下</a>'
}
})
</script> </body>
</html>
四、v-text
1、效果
v-text作用和Mustache比较类似，通常情况下，v-text接受一个string类型
2、 代码
04-v-text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-v-text</title>
</head>
<body> <div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
</script> </body>
</html>
五、v-pre
1、效果
v-pre 数据的编译过程，例如如下我就想显示{{message}}我不希望显示“你好”这两个字
2、代码
05-v-pre.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-v-pre</title>
</head>
<body> <div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
</script> </body>
</html>
六、v-cloak
1、效果
页面编译需要一点时间，在没编译成功之前，普通的展示会在页面上显示出{{message}}, 增加了v-cloak后没有编译完成的情况下，不会展示。
（1）编译成功前：
（2）编译成功后：
2、代码
06-v-cloak.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-cloak</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body> <div id="app">
<h2> 普通展示： {{message}}</h2>
<h2 v-cloak> v-cloak展示： {{message}}</h2>
</div> <script src="vue.js"></script>
<script>
setTimeout(() => {
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
}, 2000)
</script> </body>
</html>
<vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak的更多相关文章
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Vue基础之用插值表达式在视图区显示数据
Vue基础之用插值表达式在视图区显示数据 第一步:当然就是你要引入Vue.js这个脚本文件啦! <script src="https://cdn.jsdelivr.net/npm/vu ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- 基础知识（C#语法、数据库SQL Server）回顾与总结
前言 已经有大概一个多月没有更新博客,可能是开始变得有点懒散了吧,有时候想写,但是又需要额外投入更多的时间去学习,感觉精力完全不够用啊,所以为了弥补这一个多月的潜水,决定写一篇,衔接9月未写博客的空缺 ...
- Vue基础知识之指令和生命周期（一）
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
- Python VUE 基础知识
一 什么是VUE 它是一个构建用户界面的JavaScript框架,自动生成(js,css,HTML文件) 二 如何使用VUE 1. 应用vues.js <script src="vu ...
- Vue基础知识梳理
1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...
- Vue基础知识总结（一）
一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器 data:用于存储数据 methods:定义方法(方法里th ...
- Python基础知识1-基础语法
pyenv--版本管理工具(后续再补)可参见https://www.jianshu.com/p/8aaf2525fa80 冯诺依曼体系架构 编程基础 语言分类 低级语言到高级语言 高级语言 程序Pr ...
随机推荐
- Spring系列：基于Spring-AOP和Spring-Aspects实现AOP切面编程
目录 一.概念及相关术语 概念 相关术语 ①横切关注点 ②通知(增强) ③切面 ④目标 ⑤代理 ⑥连接点 ⑦切入点 作用 二.基于注解的AOP 技术说明 准备工作 创建切面类并配置 各种通知 切入点表 ...
- GIS系统想要实现Cesium For Unreal的视觉效果是否有捷径可走？
对于大多数GIS开发人员来说,CesiumJS都是比较熟悉的引擎,但是相比较Cesium For Unreal而言,CesiumJS的视觉效果就显得差强人意了,因此一些GIS开发人员对Cesium F ...
- influxdb 进行数据删除和修改
本文为博主原创,转载请注明出处: 1.条件删除数据 InfluxDB 只支持基于时间的删除操作. 可以使用 DELETE 语句来删除指定时间范围内的数据.例如,以下的 SQL 语句将删除 measur ...
- 【JMM内存模型-4】JMM内存模型之CPU缓存策略-jmmcpu4
title: [JMM内存模型-4]JMM内存模型之CPU缓存策略 date: 2021-11-17 13:27:48.139 updated: 2021-12-26 17:43:10.442 url ...
- 某物流客户Elasticsearch集群性能优化案例
客户背景 客户使用ES来进行数据存储.快速查询业务订单记录,但是经常会出现业务高峰期ES集群的cpu负载.内存使用均较高,查询延迟大,导致前端业务访问出现大量超时的情况,极大影响其客户使用体验. 部分 ...
- JavaFx之场景交互（二十一）
JavaFx之场景交互(二十一) 有parent.son两个父子窗口,父窗口可以操作子窗口,父子可以相互调用对方的对象,下面我给出两种方案,我推荐使用第二种 一.构造传参 参数比较多的话代码不优雅.而 ...
- CF650A Watchmen
首先解释一下题目里面的两个概念: 曼哈顿距离:即 \(|x_a - x_b| + |y_a - y_b|\) 欧几里得距离:即 \(\sqrt{(x_a - x_b) ^ 2 + (y_a - y_b ...
- Http 编码格式简介
Http 格式简介 Http 是用于在客户端和服务端之间进行通信的一种消息格式,一般由以下几个部分组成: 起始行:这部分在 Http 响应中也被称为状态行,针对不同的 Http 类型,其中包含的内容也 ...
- VsCode如何配置C语言环境？
以前学校上C语言课程都是使用VC++6.0上课,这个学期为了复习一遍C语言,而且自己经常使用VSCode开发前端项目,所以为了方便.这里把需要的环境和插件配置在这里介绍一下. Windows环境下安装 ...
- 2023-11-04：用go语言，如果n = 1，打印 1*** 如果n = 2，打印 1*** 3*** 2*** 如果n = 3，打印
2023-11-04:用go语言,如果n = 1,打印 1*** 如果n = 2,打印 1*** 3*** 2*** 如果n = 3,打印 1*** 3*** 2*** 4*** 5*** 6*** ...