博客详情

vue中v-text、v-html指令.html (原创)

作者：朝如青丝暮成雪
发布时间：2019-03-23 14:44:57 文章分类：vue 阅读(1042) 评论(0)

vue中v-text和v-html指令介绍：

			<!DOCTYPE html>
		
			<html lang="en">
		
			<head>
		
			<meta charset="UTF-8">
		
			<title>Title</title>
		
			<style>
		
			[v-cloak] {
		
			display: none;
		
			}
		
			</style>
		
			<!--引入vue库 -->
		
			<script src="../lib/vue-2.2.2.js"></script>
		
			</head>
		
			<div id="app">
		
			<!--插入普通文本 ,v-cloak可解决网速慢而闪烁的问题-->
		
			<p v-cloak>=={{msg}}===</p>
		
			<h4 v-text="msg">1111</h4>
		
			<p >{{msg2}}</p>
		
			<p v-text="msg2"></p>
		
			<p v-html="msg2"></p>
		
			</div>
		
			</body>
		
			<script>
		
			var vm=new Vue({
		
			el:"#app",//el 即element指定vm所操控的元素
		
			data:{
		
			msg:"你好，欢迎使用vue",
		
			msg2:"<h1>我是一段h1的代码</h1>"
		
			} ,
		
			});
		
			</script>
		
			</html>