Vue.js的条件语句和循环语句

程序员文章站 2022-07-13 14:38:41

...

Vue.js的条件语句和循环语句

1. 条件语句：v-if , v-else-if, v-else, v-show

1.1 v-if

v-if 语句用于判断表达式的对错，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。

1.1.1 示例1

我们将message的初始值设置为false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p v-if ="message">现在你看到我了</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:false
        }
    })
</script>

</body>
</html>

在浏览器运行该代码，可以看到p标签并没有被加载出来
Vue.js的条件语句和循环语句
使用Console更改message的值，将其改为Ture

现在重新查看渲染的代码，发现p标签已经渲染出来了

1.2 v-elseif-if v-else

v-else-if 和 v-else 必须和v-if配套使用

1.2.1 示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p v-if ="message === A">message的值是{{message}}</p>
    <p v-else-if ="message === B">message的值是{{message}}</p>
    <p v-else>message的值是{{message}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "B"
        }
    })
</script>

</body>
</html>

运行结果
Vue.js的条件语句和循环语句

1.3 v-show

v-show和v-if的功能一样，不同的是，不管表达式是true还是false，v-show都会将标签加载出来。

1.3.1 示例3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p v-show = "message">你看到我了</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: false
        }
    })
</script>

</body>
</html>

运行到浏览器结果如下：
Vue.js的条件语句和循环语句

1.4 v-if 和 v-show的选择

v-if和 v-show 具有类似的功能，不过 v-if 才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为 false，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。而 v-show 只是简单的 css 属性切换，无论条件真与否，都会被编译。相比之下， v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而 v-show 适用于频繁切换条件。

2. 循环条件 v-for

2.1 示例4

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "app">
    <table border="1">
        <thead>
            <tr>
                <th>index</th>
                <th>编号</th>
                <th>名字</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(book,index) in books">
                <td>{{index}}</td>
                <td>{{book.id}}</td>
                <td>{{book.book}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            books:[
                {
                    id : 1,
                    book:"水浒传"
                },
                {
                    id : 2,
                    book:"西游记"
                },
                {
                    id : 3,
                    book:"三国演义"
                }
            ]
        }
    })
</script>
</body>
</html>

Vue.js的条件语句和循环语句

注意点：v-if 和v-for可以应用于template标签上，也v-show不能。

Vue.js的条件语句和循环语句