VUE自带的原生指令如下:
1、v-on 事件触发指令
例子:
简写:
注意:play是函数名,我们会在JS模块中的methods对象里面定义。
2、v-if 逻辑判断指令 严格来说是一组指令 v-if v-else-if v-else
例子:
已登陆未登陆……
data(){
return {
login:true
}
}
……
3、v-show 条件渲染指令
例子:
德州点创教育……
data(){
return {
ok:true
}
}
……
4、v-html=”str” 文字渲染指令 :解析HTML代码
例子:
……
data(){
return {
str:”
德州点创教育
”
}
}
……
5、v-text=”str” 文字渲染指令 :解析HTML代码
例子:
……
data(){
return {
str:”
德州点创教育
”
}
}
……
与v-html不同的是,v-text把直接显示字符串“
德州点创教育
”,而v-html只会显示 “德州点创教育”,只不过这几个字变成了h1标签定义的大小。
6、v-bind 标签属性值绑定指令
注意:url是变量名,我们会在JS模块中的data()中去定义。
6.1 class绑定:
1、
box,yuan,fgreen 这三个都是样式名
act,y,g 这三个都是布尔值变量
2、
tt,tt2,box,fred都是定义好的样式名
ttshow是在data里面的一个变量,是个布尔值或者表达式
3、
aa,bb是在data里面定义好的变量
6.2 style绑定:
1、
data: {
activeColor: \’red\’,
fontSize: 30
}
上面的格式有点乱,我们可以写成一个对象的形式,如下图:
2、
data: {
styleObject: {
color: \’red\’,
fontSize: \’13px\’
}
}
7、v-for 循环指令
例子:我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
v-for 循环数组
- {{ item.str }}
data: {
items: [
{ str: \’德州\’ },
{ str: \’点创\’ },
{ str: \’教育\’ }
]
}
v-for 循环对象
- {{ value }}
data: {
object: {
name: \’德州点创教育\’,
teacher: \’张涵\’,
age: 40
}
}
你也可以提供第二个的参数为 property 名称 (也就是键名):
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
div>
还可以用第三个参数作为索引:
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
div>
以上是vue中常用的指令。
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/tech/12613.html