Vue之表达式 v-html、{{}} 、v-pre 、v-if 、

本文链接：https://blog.csdn.net/ljljlj1993/article/details/90641420

v-html

如果想输出的是html不是纯文本，那么可以使用v-html

<html>
	<head>
		<meta charset="utf-8" />
		<title>示例5 指令</title>
	</head>
	<body>
		<div id="app">
			<p v-if="show">显示这个文本</p>
			<a v-bind:href="url">链接</a>
			<br>
			<span v-html="link" ></span>
			<!-- <img v-bind:src="imgUrl" /> -->
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					show: true,
					url:'https://www.baidu.com',
					imgUrl:'img/1.jpg',
					link:'<a href="#">链接</a>'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

{{}}

这个是一个文本插值方法，我们可以把data中的数据放入其中渲染出来，除了可以绑定值还可以进行简单的三元运算以及简单运算

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例7 v-on2</title>
	</head>
	<body>
		<div id="app">

			<p v-if="show">这是一个文本</p>
			<br>绑定属性值:{{show}}
			<br>三元运算:{{show ? '正确':'错误'}}
			<br>简单计算:{{big/10}}
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					show: true,
					big: 10
				},
				methods: {
					init: function(text) {
						console.log(text)
					}
				},
				mounted: function() {
					this.init('在初始化的时候调用')
				}
			})

			app.init('外部调用')
		</script>
	</body>
</html>

在这里插入图片描述

v-pre 跳过编译

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 示例7 v-on2</title>
	</head>
	<body>
		<div id="app">

			<p v-if="show">这是一个文本</p>
			//跳过编译
			<br /><span v-pre>{{big}}</span>
			<br /><span >{{big}}</span>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					show: true,
					big: 10
				},
				methods: {
					init: function(text) {
						console.log(text)
					}
				},
				mounted: function() {
					this.init('在初始化的时候调用')
				}
			})

			app.init('外部调用')
		</script>
	</body>
</html>

在这里插入图片描述
前端运行的结果如下：