vue学习一（指令1.v-text,v-html,插值表达式{{msg}}）
一、1.v-text,v-html,插值表达式{{msg}}
1.1.v-text: 是没有闪烁问题的，会覆盖标签的元素中原本的内容，插值表达式只会替换占位符的内容，不会覆盖原来的内容
1.2.v-html: 如果后端返回包含了标签的内容，可以转化为html页面的形式展示
1.3.插值表达式{{msg}}: 只能用在标签体里面 不可用在<a href="{{msg}}"/> {{表达式}} 必须有结果 有返回值 ，可以直接使用vue的方法和实例 {{1+1}} {{hello()}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* [v-clock]{
display: none;
} */
/*任何没有加载好的，都不直接显示插值表达式*/
</style>
</head>
<body>
<div id="app">
<p v-clock>-----{{ msg }}-----</p>
<!--指定插值不闪烁的控件-->
<h4 v-text="msg">--------</h4>
<!--默认v-text 是没有闪烁问题的，会覆盖标签的元素中原本的内容，插值表达式只会替换占位符的内容，不会覆盖原来的内容--> <div>------{{msg2}}</div>
<div v-text="msg2">---哈哈---</div>
<div v-html="msg2">---哈哈---</div>
<!--v-text将得到的内容当作文本解析，而v-html将得到的内容当作html解析-->
</div> <script src="../../node_modules/vue/dist/vue.js"></script> <script>
var vm = new Vue({
el:'#app',
data:{
msg:'456',
msg2:'<h2>王哈哈是我,,是的</h2>'
}
})
</script>
</body>
</html>
可以修改浏览器的网速来更直观的看数据变化（记得还得改回去哦）
vue学习一（指令1.v-text,v-html,插值表达式{{msg}}）的更多相关文章
- VUE学习-自定义指令
自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. <div id="directive-demo"> <input ...
- Vue学习-基本指令
一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...
- vue学习之指令简写以及事件笔记
1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...
- Vue学习笔记（一）简单使用和插值操作
目录 一.Vue是什么 二.Vue简单体验 1. 声明式渲染 2. vue列表展示 3. 处理用户输入(事件监听) 三.插值操作 1. Mustache语法 2. 常用v-指令 v-once v-ht ...
- Vue学习【第一篇】：Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
- vue学习指南：第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- Vue学习之基础及部分指令小结（一）
一.理解MVC和MVVM的关系: MVC:Model View Controller (模型 视图 控制器) 分别为:业务逻辑.界面.用来调度View和Model层 MVVM:Model View V ...
- vue学习笔记（一） ---- vue指令（总体大纲）
一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...
- Vue学习笔记八：v-for，v-if，v-show指令
目录 v-for指令:遍历 HTML和效果图 v-for讲解 v-if和v-show:创建,删除,显示,隐藏 HTML和效果图 v-if和v-show的原理 v-for指令:遍历 HTML和效果图 有 ...
- vue学习-day01（vue指令）
目录: 1.什么是vue.js 2.为什么要学习前端的流行框架 3.框架和库的区别 4.后端MVC和前端的MVVM的区别 5.vue.js的基本代码--hollo world代 ...
随机推荐
- 零门槛的向量数据库「GitHub 热点速览」
上周,DeepSeek-V3 将训练大模型的成本给打下来了,但训练大模型对普通开发者来说仍然门槛很高.所以,本期的热门开源项目聚焦于降低 LLM 应用开发的入门门槛. 极易上手的向量数据库 chrom ...
- Python 问题汇总
一. Python 环境问题 使用pytest 在terminal中执行脚本调用python3.9, 而使用pycharm 的virtualenv 执行脚本调用的是python3.10, 由于环境不一 ...
- 封装的DynamicCRM平台中最实用的JS工具类
包含了一个遮罩层的使用对象和一个通用的CRM平台JS操作对象. 使用示例: 常用的比如去除页面查找字段guid的'{}':commonUtil.delBrackets(commonUtil.getLo ...
- CF div3 995 (A~G）
期末周之第三把网瘾(真是越来越放肆了...).这次赛时了一把div 3 , 又一次只做出了A~E,写完E后剩下的题没时间看了(受了些寝室噪音的干扰,最后二十分钟才出).赛后看了下F和G,感觉也是一时半 ...
- springBoot(2)--初步理解
一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fixedRate=毫秒 ...
- 计算今天是该年的第几天（c语言实现）
遇到一个有意思的编程题,使用C语言实现计算今天是该年的第几天. 实现代码如下: #include<stdio.h> int d[12]={31,28,31,30,31,30,31,31,3 ...
- SM9-签名
算法过程 代码实现 ///************************************************************************ // File name: ...
- LeetCode刷题：AddressSanitizer: heap-buffer-overflow问题请教||全局变量和引用传递的区别
在刷 https://leetcode.cn/problems/sudoku-solver/description/ 遇到AddressSanitizer: heap-buffer-overflow的 ...
- 2024 MWC上海，“翼”彩纷呈！
2024年6月26日,2024世界移动通信大会上海(简称"MWC上海")盛大开幕.围绕"未来先行"主题,来自全球的产业.技术和社区等各界代表齐聚一堂,共话产业高 ...
- 鸿蒙页面开发 - 扩展组件样式 @Extend
这篇文章介绍一个装饰器 @Extend,它的主要作用是:用于扩展原生组件的样式 比如我们扩展 Text 组件的样式,为其添加一个默认的 fontSize 和 fontColor,如下: @Entry ...