Vue零基础小白2天步入实战

最新推荐文章于 2024-01-04 19:20:32 发布

liu126120

最新推荐文章于 2024-01-04 19:20:32 发布

阅读量119

点赞数 1

分类专栏： Vue.js指令和过滤器文章标签： vue

本文链接：https://blog.csdn.net/liu126120/article/details/105454405

版权

Vue.js指令和过滤器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

指令和过滤器

Vue.js中的指令：
指令是带有v-前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到DOM上。
（1）Vue.js中的指令 v-if：


```javascript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="kanjian">是否能看到我</p>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				kanjian:true
			}
		})
	</script>
</html>

在这里插入图片描述
（2）使用v-bind指令绑定HTML属性值和参数：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div><a href="http://www.taobao.com" target="_blank">去淘宝</a></div>
			<div>
				<a v-bind:href="url" v-bind:target="mubiao">去淘宝</a>
			</div>
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				url:"http://www.taobao.com",
				mubiao:"_blank"
			}
		})
	</script>
</html>

在这里插入图片描述

（3）过滤器的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{xingming}}<br>
			{{xingming | daxie}}
		</div>
	</body>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				xingming:"liumoumou"
			},
			filters:{
				daxie:function(cs){
					if(!cs) return ''
					cs = cs.toString()
					return cs.charAt(0).toUpperCase()+cs.slice(1)
				}
			}
		})
	</script>
</html>

在这里插入图片描述

liu126120

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue零基础小白2天步入实战

指令和过滤器Vue.js中的指令：指令是带有v-前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到DOM上。（1）Vue.js中的指令 v-if：```javascript<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></ti...
复制链接

扫一扫

专栏目录