vue指令

Vue.js核心指令解析

最新推荐文章于 2024-06-08 19:38:05 发布

FreeBSFree

最新推荐文章于 2024-06-08 19:38:05 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_17190231/article/details/90264744

vue 专栏收录该内容

17 篇文章

订阅专栏

1. v-html

输出html指令

<!--v-html指令-->
<div id="app">
	<div v-html="message"></div>
</div>

<script>
	var vm = new Vue({
	el: "#app",
	data: {
		message:'<h1>test</h1>'
	},
})
</script>

2. v-bind指令与v-model指令

< h1 v-bind:class="{‘class1’:select}"> 可以缩写
< h1 :class="{‘class1’:select}">

v-model指令实现双向绑定

	<style>
			.class1{
				color:red;
				background: black;
			}
	</style>
		
	<body>
		<!--v-bind指令-->
		
		<div id="app">
			<label for='checkbox'>修改颜色</label>
			<input type="checkbox" id='checkbox' v-model="select">
			<h1 v-bind:class="{'class1':select}">test</h1>
		</div>
		
		<script>
			var vm = new Vue({
			el: "#app",
			data: {
				select:false
			},
		})
		</script>
		
	</body>

3.v-if指令

判断逻辑

<body>
		<!--v-if指令-->
		<div id="app">
			<h1 v-if="s1">test</h1>
		</div>
		
		<script>
			var vm = new Vue({
			el: "#app",
			data: {
				s1:false
			},
		})
		</script>
	</body>

4.v-on指令

事件处理
< h1 v-on:click=“some”>test可以缩写
< h1 @click=“some”>test

<body>
		<!--v-on指令-->
		<div id="app">
			<h1 v-on:click="some">test</h1>
		</div>
		
		<script>
			var vm = new Vue({
			el: "#app",
			methods: {
				some: function(){
					alert('test');
				}
			}
		})
		</script>
	</body>

5.filters过滤器

	<body>
		<!--filter过滤器-->
		<div id="app">
			{{ text1 | capitalize }}
		</div>
		
		<script>
			var vm = new Vue({
			el: "#app",
			data: {
				text1: 'test'
			},
			filters: {
				capitalize: function (value){
					value = value.toString();
					return value.charAt(0).toUpperCase() + value.slice(1);
			  }
			}
		})
		</script>
	</body>