条件渲染

v-if

v-if里面的内容返回true时被渲染

<div id="test1">
    <p v-if="show">测试文字1</p>
    <p v-if="hide">测试文字2</p>
</div>
var test1=new Vue({
    el:'#test1',
    data:{
        show:true,
        hide:false
    }
});

结果:

v-else

v-if连在一起使用

<p v-if="hide">测试文字2</p>
<p v-else>测试文字2不可见</p>

结果:

v-else-if

多个if-else嵌套

<p v-if="word==='A'">A</p>
<p v-else-if="word==='B'">B</p>
<p v-else-if="word==='C'">C</p>
<p v-else>不是ABC中的一个</p>
var test1=new Vue({
    el:'#test1',
    data:{
        show:true,
        hide:false,
        word:'A'
    }
});

结果:

也可以使用v-show

列表渲染

v-for

<div id="test2">
    <ol>
        <li v-for="language in languages">
            {{language.name}}
        </li>
    </ol>
</div>
var test2=new Vue({
   el:'#test2',
   data: {
       languages:[
        {name:'php'},
        {name:'javascript'},
        {name:'java'}]
   }
});

结果:

v-for迭代对象

<div id="test3">
    <ul>
        <li v-for="obj in lesson">
            {{obj}}
        </li>
    </ul>
</div>
var test3=new Vue({
    el:'#test3',
    data:{
        lesson:{
            name:'web后端',
            time:'周一6789',
            teacher:'wzc'
        }
    }
});

结果:

其他用法

<ul>
    <li v-for="(obj,key) in lesson">
        {{key}}:{{obj}}
    </li>
</ul>

结果:

<ul>
    <li v-for="(obj,key,index) in lesson">
        {{index}}:{{key}}:{{obj}}
    </li>
</ul>

结果:

<ul>
    <li v-for="n in 10">
        {{n}}
    </li>
</ul>

结果:

Last modification:July 12th, 2020 at 01:09 am