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代 ...
随机推荐
- Qt编写地图综合应用54-动态点位标注
一.前言 动态点位标注是定制的一个功能模块,提供直接地图上选点设置标记点,点位信息用结构体存储,其中包括了经度.纬度.速度.时间等信息,单击对应的标注点可以显示详细的弹框信息,弹框信息采用自定义的ht ...
- vue总是报错：Trailing spaces not allowed
翻译: Trailing spaces not allowed:不允许尾随空格 1-报错: 2-解决: 你的某些行的空格多了,删掉就行了 以我的截图为例 代码12行出错 选中12行(点击前面的1 ...
- 基于开源IM即时通讯框架MobileIMSDK：RainbowChat v10.0版已发布
关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持UDP .TCP .WebSocket 三种协议,支持iOS.A ...
- [LC1260]二维网格迁移
二维网格迁移 题目描述 给你一个 m 行 n 列的二维网格 grid 和一个整数 k.你需要将 grid 迁移 k 次. 每次「迁移」操作将会引发下述活动: 位于 grid[i][j] 的元素将会移动 ...
- HTTP协议超级详解【转载】
HTTP协议简介 超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式.协作式和超媒体信息系统的应用层协议.HTTP是万维网的数据通信的基础. ...
- 小程序获取定位完整的封装js（uniapp）
1.小程序获取定位,首先需要在微信公众平台,申请getLocation接口(开发管理->接口设置) 2.在manifest.json打开源码视图,增加代码 "mp-weixin&quo ...
- CDS标准视图：银行对账单抬头 I_BankStatement
视图名称:银行对账单抬头 I_BankStatement 视图类型:基础 视图代码: 点击查看代码 事务代码:FF67/ 视图结构: 字段名称 技术名称 短代码 BANKSTATEMENTSHORTI ...
- SpringBoot(二) - 核心配置文件 (+ 邮件发送 和 短信发送)
1.application.properties 和 application.yml 配置文件格式区别 1.1 文件格式 application.properties # 端口号 server.por ...
- ETL工具--Sqoop
1. 概述 Sqoop是apache旗下的一款 "Hadoop和关系数据库之间传输数据"的工具导入数据:将MySQL,Oracle导入数据到Hadoop的HDFS.HIVE.HBA ...
- 天翼云加速落地紫金DPU实践应用，让算力供给更高效！
近日,以"智驱创新·芯动未来"为主题的第三届DPU峰会在北京成功举办.会上,天翼云凭借紫金DPU在架构革新.算力释放.场景落地等多方面的成果,荣膺"2023芯星品牌奖&q ...