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

v-if,v-else,v-for

2022-07-27 19:07:00 【qq_ forty-two million forty-two thousand one hundred and fifty-】

conditional

v-if,v-else Implement judgment
Code

<!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 yes A</p>
    <p v-else-if="type==='B'">type yes B</p>
    <p v-else>type yes C</p>
</div>

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

</body>
</html>

Running results
Insert picture description here

loop

From an array todos Each item taken out is 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: ' Study  JavaScript' }, {
       text: ' Study  Vue' }, {
       text: ' The whole cow project ' } ] } }) </script>

</body>
</html>