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

v-html如果想输出的是html不是纯文本，那么可以使用v-html<html><head><meta charset="utf-8" /><title>示例5 指令</title></head><body><div id="app"><p v-if="...

ljljlj1993

6092人浏览 · 2019-05-28 23:57:40

ljljlj1993 · 2019-05-28 23:57:40 发布

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中去过滤，过滤后
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^