vue指令

時間 2019-11-09

標籤 vue 指令简体版

原文原文鏈接

1. v-html

輸出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}">api

v-model指令實現雙向綁定bash

<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指令

判斷邏輯app

<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">testui

<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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。