vue 指令学习

指令

v-text

html
	<p v-text="msg"></p>
	<p>{{msg}}</p>
js
	var app = new Vue({
		el: '#app',
		data: {
			msg:"我是v-text指令"
		}
	})

结果

我是v-text指令
我是v-text指令

v-html

tips：如果将包含了标签的内容放在{{htmlStr}}内或 v-text="htmlStr"会被当成文本内容展示；

html
	<div v-html="htmlStr"></div>
js
		var app = new Vue({
			el: '#app',
			data: {
				htmlStr:'<span style="color:#f00;">我是v-htmlStr</span>'
			}
		})

结果

我是v-html

v-show

html
	<div v-show="showTime">我是showTime</div>
js
	var app = new Vue({
		el: '#app',
		data: {
			showTime:true
		}
	})

结果
···
我是showTime
···
通过 app.showTime = false； 改变隐藏显示。

v-if、v-else-if、v-else

html
	<ul>
		<li v-if='id== 1'>我是v-if</li>
		<li v-else-if='id== 2'>我是v-else-if</li>
		<li v-else>我是v-else</li>
	</ul>
js
		var app = new Vue({
			el: '#app',
			data: {
				id:2
			}
		})

结果

我是v-else-if

v-for

html
	<ul>
		<li v-for="item in info">{{item}}</li>
		<li>---分隔---</li>
		<li v-for="(value,name,index) in info">{{ index }} - {{ name }}: {{ value }}</li>
	</ul>
	<br>
	<ul>
		<li v-for="(item,index) in infoType">{{index}}--{{item.sysId}}--{{item.title}}</li>
	</ul>
js
	var app = new Vue({
		el: '#app',
		data: {
			info:{
				sysId: '000001',
				title: "随便标题"
			},
			infoType:[
				{sysId: '901',title: "网页"},
				{sysId: '552',title: "资讯"},
				{sysId: '432',title: "视频"},
				{sysId: '652',title: "图片"}
			]
		}
	})

结果

000001
随便标题
------
0 - sysId: 000001
1 - title: 随便标题

0--901--网页
1--552--资讯
2--432--视频
3--652--图片

v-on

html
	<button v-on:click="handleAlert('Yeah Yeah Yeah Yeah Yeah !')">Alert Click!</button>
	<button @click="showMsg()">show msg!</button>
js
	var app = new Vue({
		el: '#app',
		data: {
			message: '我就是那个message!'
		},
		methods:{
			handleAlert:function(msgs){
				document.body.append(msgs);
			},
			showMsg:function(){
				document.body.append(this.message);					
			}
		}
})

结果

Yeah Yeah Yeah Yeah Yeah !我就是那个message!

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

v-bind

v-bind:class='' 、 v-bind:href=''、:src=''、:style=''

html
	<div class="clock" v-bind:class="{ 'active': isActive, 'red': isColor }" >显示{{isActive == true?'active':''}}和 {{isColor == true?'red':''}}</div>
js
	data:{
		isActive:false,
		isColor:true
	}

结果

<div class="clock red">显示和 red</div>

v-model

html
	<p>
		<input type="checkbox" value="星期六" v-model="checkedNames">
		<input type="checkbox" value="星期日" v-model="checkedNames">
	</p>
	<p>我选择了( <span v-for="item in checkedNames">{{item}} </span>)去爬山</p>
	<select v-model="selected">
		<option disabled value="">请选择</option>
		<option>星期一</option>
		<option>星期二</option>
		<option>星期三</option>
	</select>
	<p>我们: {{ selected }}去爬山</p>
js
	data:{
		checkedNames:[],
		selected:''
	}

v-pre、v-cloak、v-once

	<p  v-pre>{{ message }}</p>
	<p v-cloak>{{ message }}</p>
	<p v-once>修改msg的值不会改变 ： {{msg}}</p>

结果

{{ message }}

我就是那个message!

修改msg的值不会改变 ： 我是v-text指令