指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
指令名称 指令作用 备注
v-html 显示与解析HTML代码
v-text 原封不动的展示
v-for 遍历与循环功能 遍历数字,字符串,对象,数组
v-bind 绑定属性 简单形式 :属性名="值"
v-model 双向绑定 只支持input,select,textarea
v-show 显示与隐藏 隐藏只是样式:style="display=none"
v-if 判断 v-if/v-else-if/v-else
v-on 绑定事件 简写 @事件名=方法名()
v-html与v-text
html会解析HTML标签(相当:innerHTML)
text不会解析HTML标签(相当:innerText)
{{msg}}
v-for
遍历咱们的数据(数字,字符串,对象,集合)
数字就是普通的循环 for(var i=1;i<=数字;i++)
字符串是拿到每一个字母
对象循环
ov:代表对象的属性值
ok:代表对象的属性名
oi:代表索引
数组循环
ov:代表对象的属性值
oi:代表索引
- {{v}}
- {{v}}
- {{k}} - {{v}} -{{i}}
- {{v}}==={{i}}
/**
* v-for:进行相应的循环(数字,字符串,对象,数组)
*/
new Vue({
el:"#app",
data:{
num:5,
name:"zhang",
smalltxt:{
name:"斗罗大罗",
author:"杨哥",
sn:"34325Nfe"
},
hobbys:["吃饭","睡觉","打豆豆","垃圾"]
}
})
v-bind的使用
bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
bind有一种简写形式 <标签 :属性名="属性值">
如果直接把整个对象进行属性绑定 <标签 v-bind="对象">
![]()
v-model
主要是用于完成双向的绑定
只能用于:input,select,textarea
名称:
{{inputVal}}
爱好:
看电影
看小说
看漫画
垃圾
{{checkboxVal}}
性别:
男
女
叨客
{{radioVal}}
{{selectVal}}
{{textareaVal}}
/**
* v-model:只能在表单标签中使用(input,select,textarea)
*/
new Vue({
el: "#app",
data: {
inputVal:"我是杨杨我怕谁!",
checkboxVal:["1","3"],
radioVal:2,
selectVal:2,
textareaVal:"sdfsfd"
}
})
v-show&v-if
v-show用于展示和隐藏 <标签 v-show="true/false">
v-if <标签 v-if="条件">...
show只是隐藏标签,if直接就不会出现不满足条件的标签
v-show的案例代表
最后的效果是有一个按钮,点一下显示图片,再点一下隐藏图片
![](imgs/1.jpg)
v-if的案例
;
未成年人禁止入内
客观请进,这里欢迎您
老神仙,不食人间烟火
v-on 事件绑定
事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
调用的方法可以不加()
v-on有一种简写形式 <标签 @事件名=方法名>
;
(本文由源码时代技术老师撰写,转载请注明出处)