当前位置：网站首页>v-if,v-else,v-for

v-if,v-else,v-for

2022-07-27 16:21:00 【qq_42042158】

条件判断

v-if,v-else 实现判断
代码

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo-02</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <p v-if="type==='A'">type是A</p>
    <p v-else-if="type==='B'">type是B</p>
    <p v-else>type是C</p>
</div>

<script> var app = new Vue({
       el: '#app', data: {
       type: 'B' } }) </script>

</body>
</html>

运行结果
在这里插入图片描述

循环

从数组todos里面取出的每一项为todo

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo-04</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <ol>
        <li v-for="todo in todos">
            {
   { todo.text }}
        </li>
    </ol>
</div>

<script> var app = new Vue({
       el: '#app', data: {
       todos: [ {
       text: '学习 JavaScript' }, {
       text: '学习 Vue' }, {
       text: '整个牛项目' } ] } }) </script>

</body>
</html>