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>

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

过滤器

在插值{{}}的尾部插入管道符号|,并定义一个过滤 的方法,经常用于格式化文本;
首先页面加载的时候,会先去data拿值,因为在{{}}中使用了过滤,那么data拿着值去fillter中的formatDate中去过滤,过滤后
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐