VUE原生指令大全及详解

Vedu • 2020-10-17 07:38 • 技术资讯 • 阅读 1314

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

VUE原生指令大全及详解

德州点创教育

德州点创教育

德州点创教育

6.1 class绑定：

6.2 style绑定：

v-for 循环数组

v-for 循环对象

相关推荐

发表评论