vue常用指令

最新推荐文章于 2024-04-24 14:19:01 发布

原创最新推荐文章于 2024-04-24 14:19:01 发布 · 804 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了 Vue.js 中的多个核心指令，包括 v-text 和 v-html 的文本解析方式，v-show 和 v-if 的显示控制机制，v-bind 的属性绑定用法，以及 v-for 的数据遍历功能。

一、
v-text:
简写： {{}}
作用：
1、解析数据
2、可以解析JS的表达式
底层原理：应用类似于innerText的方法

<h2 v-text="msg.x"></h2>
<h2>{{msg.y}}</h2>

var vm = new Vue({
	el:"#app" ,
	data:{
		 msg:{
			x:191011,
			y:123
		},
    }
})

二、
v-html:
作用：
1、解析数据
2、可以解析JS的表达式
底层原理：应用类似于innerHTML的方法( v-html与v-text其实是一样的只不过v-html可以解析html标签)

<h2 v-html="p"></h2>

var vm = new Vue({
	el:"#app" ,
	data:{
		 msg:{
			x:191011,
			y:123
		},
		p:"<p>不要睡觉</p>"
    }
})

三、
v-show:
作用：
显示/隐藏
当值为true的时候为显示 false的时候为隐藏
底层原理：操作元素的display属性

<div id="app">
	<h2 v-show="flag">{{msg}}</h2>
 </div>
var vm = new Vue({
	el:"#app" ,
	data:{
		msg:"1910",
		flag:true,
		p:"<p>不要睡觉</p>"
	}    
})

四、
v-if:
创建/销毁
当值为true的时候为创建 false的时候为销毁
底层原理是操控元素的创建/销毁
配合v-if使用的指令
（当使用v-else / v-else-if 的时候必须要使用 v-if）
v-else
v-else-if

<div id="app">
           <div v-if="num==1">111</div>
           <div v-else-if="num==2">222</div>
           <div v-else>333</div>
</div>
var vm = new Vue({
   el:"#app",
   data:{
   	flag:false,
   	num:10
   }
})

五、
v-bind：
用来给元素绑定属性
语法：v-bind：属性 = 属性值
简写：：后面跟属性
常用的属性有哪些？
class
id
src
herf
title
type
alt

<div v-bind:id="myId" :title="name"></div>
<img :src="mySrc" alt="">
<a :href="link">{{des}}</a>
<input :type="type.password"><br>
<div :style="style"></div>
<div :class="myclass3.boxA"></div> -->

var vm = new Vue({
	el:"#app",
	data:{
		myId:"box",
		mySrc:"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
		link:"http://www.baidu.com",
		name:"1910",
		type:{
			text:"text",
			password:"password",
			submit:"submit",
			checked:"checked",
			radio:"radio"
		},
		des:"百度",
		style:{
			width:"100px",
			height:"100px",
			backgroundColor:"red"
		},
		myclass:"box box1",
		myclass3:{
			boxA:true,
			boxB:false
		},
	}
})

六、
v-for：
用来遍历，可以用来遍历任何对象(数组，字符串，对象…)

<div v-for="(item,index) in arr">{{item}}-------{{index}}</div>
<hr>
<div v-for="(item,index) in obj">{{index}}-------{{item}}</div>
<hr>
<div v-for="(item,index) in 5">{{item}}-------{{index}}</div>
<hr>
<div v-for="(item,index) in '1231asx23123'">{{item}}--------{{index}}</div>
var vm = new Vue({
	el:"#app",
	data:{
		arr:[10,20,30,40],
		obj:{
			username:"youyuxi",
			age:28
		}
	}
})