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代 ...
随机推荐
- TIBCO Jaspersoft Studio-6.12.2连接mysql时显示时区问题
TIBCO Jaspersoft Studio-6.12.2创建mysql型的Data Adapter, 在进行连接test时弹出显示时区问题,如下图所示: 解决办法: 在Data Adapter W ...
- 在jooq的POJO类中使用Lombok的Data注解
jooq生成pojo类的配置根据官方给的如下: https://www.jooq.org/doc/3.14/manual/getting-started/tutorials/jooq-in-7-ste ...
- map循环如何跳出循环
今天在开发的时候遇到了一个问题.就是想在使用map的时候跳出循环无法实现,于是就在网上搜寻了一番,说map本身不能跳出循环,有一个大佬提出了抛出异常的方法,记录一下 let list=[1,2,3,4 ...
- Golang-包8
http://c.biancheng.net/golang/package/ Go语言包的基本概念 Go语言是使用包来组织源代码的,包(package)是多个 Go 源码的集合,是一种高级的代码复用方 ...
- 浅说 c++20 coroutine
浅说cppcoro 上一篇<浅说c/c++ coroutine>介绍了stackful协程,举了win32 Fiber跟tencent/libco为例. 本篇https://www.cnb ...
- vue3.5保证你看得明明白白
子组件中设置默认属性 <template> <div class="child-page"> <h1>我是子组件</h1> < ...
- tomcat 自启动脚本（守护模式）
tomcat以daemon模式启动 跳转到最新脚本 1.jsvc简介 Jsvc 是专为 Java 应用程序开发的一个工具包,其目标是把 Java 应用程序的普通运行转换为可以配置某个普通用户以 Uni ...
- 如何配置 maven 编译插件的 JDK 版本
普通maven项目配置编译器版本 参考maven官方文档 Setting the -source and -target of the Java Compiler maven有2种方法设置编译JDK版 ...
- .NET 8.0 + Linux 香橙派，实现高效的 IoT 数据采集与控制解决方案
前言 随着物联网(IoT)技术的迅猛发展,智能设备之间的互联互通变得越来越重要. 推荐一套基于 C# 的高效 IoT 系统,该系统运行在 Linux 开发板上,并支持 Modbus RS485 传感器 ...
- npm i 下载太慢
1.在项目内部进入终端 2.输入:npm config set registry https://registry.npmmirror.com 修改npm下载地址为淘宝 3.然后再执行 npm i 进 ...