Vue 分支循环

前端开发作者： 2024-08-20 10:00:01

v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。如果数据是对象类型，则可以使用(value,key,index)进行取值。需要注意的是，当不指定key/value而只指

v-for

<body>

    <div id="app">
        <ul>
            <li v-for="(ele,index) in array">{{ele}}-{{index}}</li>
        </ul>
    </div>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",data: {
            array: ["第一个元素","第二个元素","第三个元素"],}
    })
</script>
</body>

v-if

<body>

    <div id="app">
        <p v-if="conditionOne">渲染我</p>
        <p v-if="conditionTwo">不渲染我</p>
    </div>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",data: {
            conditionOne: true,conditionTwo: false,},})
</script>
</body>

v-else

<body>

    <div id="app">
        <p v-if="conditionOne">条件为真渲染我</p>
        <p v-else>否则渲染我</p>
    </div>
    
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",data: {
            conditionOne:false,})
</script>
</body>

v-else-if

<body>

    <div id="app">
        <p v-if="grades > 90">成绩优秀</p>
        <p v-else-if="grades > 60">成绩及格</p>
        <p v-else-if="grades > 40">成绩一般</p>
        <p v-else>成绩较差</p>
    </div>
    
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",data: {
            grades:80,})
</script>
</body>

逻辑判断

符号	描述
&&	与（优先级3），一真一假取一假
\|\|	或（优先级2），一真一假取一真
!	非（优先级1），两个为真才取真

<body>
    <div id="app">
        <p v-if="conditionOne && conditionTwo">两个为真，渲染</p>
    </div>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",data: {
            conditionOne:true,conditionTwo:true,})
</script>
</body>

key属性

<body>

    <div id="app">
        <input v-if="type == 'phone'" type="text" placeholder="手机注册" >
        <input v-if="type == 'email'" type="text" placeholder="邮箱注册" >
        <br>
        <label for="phoneReigster">手机
            <input id="phoneReigster" type="radio" v-model="type" value="phone">
        </label>
        <label for="emailReigster">邮箱
            <input id="emailReigster" type="radio" v-model="type" value="email">
        </label>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",data: {
                type: "phone",});
    </script>
</body>

<input v-if="type == 'phone'" type="text" placeholder="手机注册" key="phoneRigster">
<input v-if="type == 'email'" type="text" placeholder="邮箱注册" key="emailRigster">

:key唯一标识

<body>

    <div id="app">
        <ul>
            <!-- 一定要一一对应，所以这里是与value做绑定，而不是index，index是可以变化的 -->
            <li v-for="(value,index) in array" :key="value">{{index+1}}-{{value}}</li>
        </ul>
        <button @click.once=func()>插入</button>
    </div>
    
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",data: {
                array:[
                    "A","B","C","D",]
            },methods:{
                func(){
                    this.array.splice(2,"E");
                },});
    </script>
</body>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65454.html