<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 ...
随机推荐
- 【WCH以太网接口系列芯片】基于CH395的组播请求（IGMP）
在上一篇文章中,我们通过直连电脑测试了CH395在组播环境中进行数据的收发,但在实际的使用场景中更多的是将CH395接入局域网环境中.因此,我们需要使用到一个协议--IGMP(Internet Gro ...
- python3使用pandas备份mysql数据表
操作系统 :CentOS 7.6_x64 Python版本:3.9.12 MySQL版本:5.7.38 日常开发过程中,会遇到mysql数据表的备份需求,需要针对单独的数据表进行备份并定时清理数据. ...
- 后端程序员必会的前端知识-04：Vue3
Vue 3 1. TypeScript 1) 动态类型的问题 前面我们讲过 js 属于动态类型语言,例如 function test(obj) { } obj 可能只是个字符串 test('hello ...
- SpringBoot CORS 跨域请求解决方案之配置过滤器
方式一:@CrossOrigin 方式二: @Configuration public class CorsConfig implements WebMvcConfigurer { @Override ...
- 寻找市场中的Alpha-WorldQuant功能的实现（下）
导语:本文介绍Alpha的相关基本概念,以及寻找和检验Alpha的主要流程和方法.在上篇中我们梳理了 WorldQuant经典读本FindingAlphas的概要以及WebSim的使用.作为下篇,我们 ...
- 【开源项目推荐】OpenMetadata——基于开放元数据的一体化数据治理平台
大家好,我是独孤风. 这几年数据治理爆火,但迟迟没有一个优秀的开源数据治理平台的出现.很多公司选择元数据管理平台作为基础,再构建数据质量,数据血缘等工具. 今天为大家推荐的开源项目,是一个一体化的数据 ...
- Python——第一章：数据类型介绍
数据类型: 区分不同的数据.不同的数据类型应该有不同的操作 数字: 做加减乘除+-*/ 整数,int 小数,float a= 10 #整数 b = 20 print(a + b) #加法运算 c = ...
- 一个Tomcat 如何部署多个项目？附多种解决方案及详细步骤！
此文源自一次多年前面试的面试题,民工哥将它总结出来分享给大家,希望对大家有所帮助,或者今后的面试中说不定会用的上. 首先,我们了解一下常见的Java Web服务器. Tomcat:由Apache组织提 ...
- Android学习--Intent
Intent : Intent 是一个动作的完整描述,一种运行时的绑定机制,Intent中包含对Intent有兴趣的组件信息,如对动作的产生组件.接受组件和传递的数据信息.Android根据此Inte ...
- python Django api 返回图片
re_path(r"report_img/(.*)$",views.ReportImage.as_view()) def return_img(request): img_dir ...