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音视频开发6-ffmpeg解码处理
一.前言 采用ffmpeg解码,是所有视频监控开发人员必备的技能,绕不过去的一个玩意,甚至可以说是所有音视频开发人员的必备技能.FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开 ...
- [转]Windows系统下彻底删除Windows.old 文件夹的方法
系统是直接硬盘安装的,导致c盘产生了旧系统的文件夹Windows.old,占用很大的磁盘空间,删也删不掉,咋办?不要紧,下面大神来教你神操作!!! 1.打开"计算机",选择C盘,进 ...
- Windows7下关闭和打开IPV6隧道
IPv6隧道是将IPv6报文封装在IPv4报文中,让IPv6数据包穿过IPv4网络进行通信.对于采用隧道技术的设备来说,在隧道的入口处,将IPv6的数据报封装进IPv4,IPv4报文的源地址和目的地址 ...
- 在Win7 x64环境中将World Wind Java SDK 2.1.0嵌入到Eclipse中的方法
1.解压worldwind-2.1.0.zip. 2.打开Eclipse,依次点击New–>Java project ,输入project的名称WorldWind,一路直到finish.然后就可 ...
- IM通讯协议专题学习(七)：手把手教你如何在NodeJS中从零使用Protobuf
1.前言 Protobuf是Google开源的一种混合语言数据标准,已被各种互联网项目大量使用. Protobuf最大的特点是数据格式拥有极高的压缩比,这在移动互联时代是极具价值的(因为移动网络流量到 ...
- 《计算机体系结构与SoC设计》（二）
1. 多指令流单数据流 多指令流单数据流(Multiple Instruction Stream, Single Data Stream,简称 MISD)是一种处理器设计概念,它允许处理器在单个时钟周 ...
- mac文件目录结构
详解MAC硬盘中各个文件夹 详解MAC硬盘中各个文件夹 打开Macintosh HD你会发现内中有四个文件夹 分别有--应用程序(Applications).系统(System).用户(User).资 ...
- refs转发
ref 转发不但可以转发指向具体的dom组件,也可以指向class组件的实例 import React from 'react' import ReactDOM from 'react-dom'; / ...
- Java线程的通信
当需要多个线程共同完成一件任务,而且需要有规律的执行,那么多个线程之间需要一定的通信机制,可以协调他们的工作,以此实现多线程共同操作一份数据. 1 等待唤醒机制 这是一种线程间的协作机制,与争夺锁的竞 ...
- solon-flow 你好世界！
solon-flow 是一个基础级的流处理引擎(可用于业务规则.决策处理.计算编排.流程审批等......).提供有 "开放式" 驱动定制支持,像 jdbc 有 mysql 或 p ...