VUE原生指令大全及详解

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

发表评论

登录后才能评论