Vue条件和循环

た入场券 2022-05-10 05:42 298阅读 0赞

条件：

v-if、v-else-if、v-else，这三个指令不需要参数。例：

</div>

new Vue(\{

el: '\#app',

data: \{ type: 'C' \}

\})；

</script>

另外，还有一个v-show指令也可以用来根据条件展示元素。例：

<h1 v-show="ok">Hello!</h1>

</div>

new Vue(\{

el: '\#app',

data: \{

ok: true

\})；

</script>

v-show与v-if不同的是，当if判断为false时，所在的标签不会被渲染进html中，而v-show则在条件为false时，将标签display设置为none。

循环：

1：循环数组

v-for指令用来循环。形式如：v-for=" site in sites" 其中，sites为数据源数组，site为迭代元素。例：

</div>

new Vue(\{

el:'\#app',

data:\{

sites:\[ \{name:'aaa'\},\{name:'bbb'\},\{name:'ccc'\} \]

\});

</script>

在<template>中使用与直接在普通标签中使用有所区别。如在<template>中使用，形式为：

<ol>

</template>

</ol>

</div>

2：迭代对象属性

形式：v-for="value in object"，这里的value就是Object的属性值（方法值）。例：

<ul><li v-for="value in object"></li>\{ \{value\}\}</ul>

</div>

new Vue(\{

el:'\#app',

data:\{

object:\{

name:"vue学习”，

slogan:"好好学习，天天向上",

info:function()\{

return 'abc';

\});

</script>

这里，会在<li>中循环出object的属性值。注意，info方法直接输出function()\{...\}。

另一种形式为：v-for="(value,key) in object"，注意，这里value在前，key在后。key指的是属性名。上面的代码可以改写为：

<ul><li v-for="(value,key) in object">\{ \{key\}\}:\{ \{value\}\}</li></ul>

</div>

就会以key:value的形式输出属性。

第三种形式：v-for="(value,key,index)" in object。这里的index为索引。索引从0开始。

3：迭代整数

形式：v-for="n in 10"，n会从1迭代到10。例：

</div>

new Vue(\{

el:'\#app'

\});

</script>

Vue条件和循环

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue.js 条件与循环

相关 Vue—条件语句、循环语句

相关 Vue（指令/条件循环）

相关 Vue条件和循环

相关 Python——条件语句和循环

相关 vue的条件及循环语句

相关 Vue条件与循环

相关 Vue---条件语句和循环语句（二）

相关 Vue---条件语句和循环语句（一）

相关 Vue.js 条件与循环