Vue的常用指令

Vue的常用指令

v-text、v-html、v-if…v-else、 v-show 、v-for 、v-model、v-on、v-bind（三元运算）

一、v-text、v-html

<div id="root">
			<!-- 可以用v-text直接显示文本内容 -->
			<p v-text="message"></p>
			<p>{{message}}</p>
			
			<!-- 可以v-html来输出HTML内容 -->
			<p v-html="htm"></p>
</div>

new Vue({
			el:'#root',
			data(){
				return{
					message:"hello Vue",
					htm:'hello',
				}
			},
			methods:{}
		})

运行结果：

二、v-if…v-else、v-show

<!-- 可以用v-if、v-else 来写if...else判断 -->
			<p v-if="check">YES；</p>
			<p v-else>NO</p>
			
<!-- v-show 可以判断是否为真，true显示；false不显示 -->
			<p v-show="check">我是真的</p>
			
<!-- 在data里面check=true -->

运行结果

三、v-for 是用来循环遍历数组的

item 是内容；index是索引号（最少用一个参数存放内容）

	<!-- v-for 是用来循环遍历 item 是内容；index是索引号（最少一个参数存放内容） -->
			<div v-for="(item,index) in result1">
				<span>索引号：{{index}}</span>
				<span>内容：{{item}}</span>
			</div>

	<!-- 如果是多维数组，可以item.name这样输出 -->
			<div v-for="(item,index) in result2">
				<span>item:{{item.name}}</span>
				<span>index:{{index}}</span>
			</div>
			
	<!-- 在data里面result1，result2 -->
			result1:['一','二','三','四','五'],
			result2:[
				{id:1,name:'张三'},
				{id:2,name:'李四'},
				{id:3,name:'王五'},
				],

运行结果：

四、v-model 是用在表单上创建双向数据绑定

			<input type="text"  v-model="content" />
			<p>{{content}}</p>
			
			<!-- 在data里面content-->
			content:'',

运行效果：

五、v-on 绑定监听事件

语法糖：直接用@代替v-on；两个的效果是一样的

<!-- v-on  绑定监听事件  语法糖：直接用@代替v-on -->
			<div><p>v-on:click </p>
				<b>{{number1}}</b>  
				<button v-on:click="coutNumber1">点我增加</button>
			</div>
			<p>@click </p>
			<div>
				<b>{{number2}}</b>
				<button @click="coutNumber2">点我增加</button>
			</div>
	<!-- 在data里面number1，number2；methods中的coutNumber1,coutNumber2-->
			data(){
					return{
						number1:1,
						number2:1,
					}
				},
			methods:{
					coutNumber1(){
						this.number1++;
					},
					coutNumber2(){
						this.number2++;
					}
				}

运行效果：

六、v-bind动态绑定属性

语法糖：用 : 代替v-bind；两个的效果是一样的；还有常用的三元运算

		<!-- v-bind动态绑定属性  语法糖：用 : 代替v-bind -->
			<img v-bind:src="img" />
			<img :src="img" />
		<!--比较常用的有三种 -->
		<!--对象绑定 -->
			<div :class="{classA:check,classB:check}">123</div>
		<!-- 数组绑定 -->
			<div :class="[clsA,clsB]">456</div>
		<!-- 数组和对象绑定 -->
			<div :class="[{classA:check},clsB]">789</div>
			<br/>
			
		<!-- 关于动态绑定中常用的三元表达式3种写法 -->
			<div :class="number1==number2?'classA':'classB'">123</div>
			<div :class="[number1==number2?clsA:clsB]">456</div>
			<div :class="number1!=number2? clsA:clsall">789</div>
		<!-- 在data中的相关数据；-->
			data(){
			return{
					check:true,
					number1:1,
					number2:1,
					img:'http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg',
					clsA:'classA',
					clsB:'classB',
					clsC:'classC',
					clsall:'classC classB'
			}
			<!-- style样式-->
			<style>
					img{
						width: 100px;
						height: 100px;
					}
					.classA{
						color: darkblue;
					}
					.classB{
						background:cadetblue;
					}
					.classC{
						color: chocolate;
					}
			</style>

效果图：

初来乍到，如果有什么问题或者bug可以提出，不喜勿喷