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代 ...
随机推荐
- React 应用的 Nginx 缓存控制
典型 React 应用面临的缓存问题,可通过 Nginx 配置进行解决 通用部署 构建应用后,只需使用 Nginx 指向静态文件即可 server { listen 80; root /PATH/TO ...
- w3cschool-Netty 实战精髓篇3
https://www.w3cschool.cn/essential_netty_in_action/essential_netty_in_action-wd1j28dq.html Netty Web ...
- nginx配置参数优化
ginx作为高性能web服务器,即使不特意调整配置参数也可以处理大量的并发请求.以下的配置参数是借鉴网上的一些调优参数,仅作为参考,不见得适于你的线上业务. worker进程 worker_proce ...
- 分圆多项式（cyclotomic polynomial）
最近论文中经常遇到分圆多项式,现在系统的学习一下! 本原单位根 之前介绍n次单位根,现在详细学习一下n次本原单位根(n-th primitive unit root) 一个复数是n次单位根,当且仅当具 ...
- C：条件编译
问题 #ifdef HELIB_DEBUG long pa, pb; std::vector<long> slots; decryptBinaryNums(slots, a, *dbgKe ...
- XReport通过数据控制控件是否打印
需求场景:医嘱单在患者出院的时候,需要标记一条红线,表示以下没有医嘱了.数据库中此记录的一个字段属性isRed值来标记这一行. 实现:XReport报表的明细区域增加一个line1对象.然后在明细表格 ...
- Vue获取DOM，数据监听，组件，混合和插槽
Vue获取DOM,数据监听,组件,混合和插槽 注:":" 是指令 "v-bind"的缩写,"@"是指令"v-on"的缩写 ...
- Flink 部署和整体架构
一.Flink运行部署模式和流程 部署模式: 1.Local 本地部署,直接启动进程,适合调试使用 2.Standalone Cluster集群部署,flink自带集群模式 3.On Yarn 计算资 ...
- mysql之PreparedStatement的增删改
编写配置文件[db.properties]: driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/jdbcStudy?useUni ...
- 新塘M051 关于 System Tick设置，3种方法操作
关于 System Tick设置,给出3种方法,学习并确认OK: 使用 M051BSPv3.01.001版本 一.使用函数CLK_EnableSysTick() 1 //Enable System T ...