<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 ...
随机推荐
- 数据结构（C语言版 第2版）课后习题答案全集 严蔚敏
有的小伙伴在网上奋力的找 严蔚敏版 第2版 数据结构 的始终无果,那么我这里就整理好,放在同名公众号中了,也可扫文章末尾的二维码直达公众号,回复数据结构的关键词即可拿到.
- 从0开始用Maven
一.Maven的介绍即相关概念 Maven是一款构建和管理Java项目的工具,它将项目开发和管理过程抽象成一个项目对象模型(POM),提供了一种统一的项目结构. Maven官网 1.为什么使用Mave ...
- vertx 的http服务表单提交与mysql验证
1.依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...
- ClickHouse(17)ClickHouse集成JDBC表引擎详细解析
目录 JDBC 建表 用法示例 JDBC表函数 资料分享 参考文章 JDBC 允许CH通过JDBC连接到外部数据库. 要实现JDBC连接,CH需要使用以后台进程运行的程序 clickhouse-jdb ...
- web概念概述
JavaWeb: *使用Java语言开发基于互联网的项目 软件架构 1.C/S:Client/Server 客户端/服务器端 *在用户本地有一个客户端程序,在远端有一个服务端程序 ...
- MySQL调优的一些总结
SQL优化可以从那几个方面去优化 1.基本写法优化: 1.少使用select * ,尽量使用具体字段: 2.对于条件来说等号之类两边的字段类型要一致,字符串不加单引号索引会失效: 3.尽量少使用Ord ...
- 如何给图数据库 NebulaGraph 新增一种数据类型，以 Binary 为例
NebulaGraph 内核所自带的数据结构其实已经很丰富了,比如 List.Set.Map.Duration.DataSet 等等,但是我们平时在建表和数据写入的时候,可以用到的数据结构其实比较有限 ...
- JXNU acm选拔赛 涛神的城堡
涛神的城堡 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submiss ...
- python异步编程之asyncio初识
async await介绍 用asyncio提供的@asyncio.coroutine可以把一个生成器标记为协程类型,然后在协程内部用yield from 等待IO操作,让出cpu执行权. 然而异步的 ...
- Redis的五大数据类型（简单使用）
1:Redis的简单介绍? Redis(Remote Dictionary Server ):即远程字典服务 是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型Key-Val ...