zoukankan      html  css  js  c++  java
  • vue---条件与循环语句

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>vue--循环语句</title>
    <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>

    <body>
    <div id="app">
    <p v-if="seen">
    看下我
    <template v-if="ok">
    <h1>悟空</h1>
    <p>
    三打白骨精
    </p>
    {{#if ok}}
    <h1>yes</h1>
    {{/if}}
    </template>

    </p>

    </div>

    <!--v-else-->
    <div id="else">
    <!--Math.random()取随机数-->
    <div v-if="Math.random()>0.5">
    sorry
    </div>
    <div v-else>
    welcome
    </div>
    </div>


    <!--v-else-if-->
    <div id="elseif">
    <div v-if="type === 'A'">
    A
    </div>
    <div v-else-if="type === 'B'">
    B
    </div>
    <div v-else-if="type === 'C'">
    C
    </div>
    <div v-else>
    Not A/B/C
    </div>
    </div>
    <!--v-for 指令需要以 site in sites 形式的特殊语法,
    sites 是源数据数组并且 site 是数组元素迭代的别名。-->
    <div id="vfor">
    <ol>
    <li v-for="dog in dogs">
    {{dog.name}}<br>
    --------------
    </li>
    </ol>
    <ul>
    <template v-for="dog in dogs">
    <li>{{ dog.name }}</li>
    <li>--------------</li>
    </template>
    </ul>
    </div>


    <div id="forobj">
    <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
    </ul>
    <ul>
    <li v-for="(value,key) in object">
    {{key}}:{{ value }}
    </li>
    </ul>
    <ul>
    <li v-for="(value,key,index) in object">
    {{index}}: {{key}}:{{ value }}
    </li>
    </ul>
    </div>
    <div id="forint">
    <ul>
    <li v-for="n in 10"> {{n}}</li>
    </ul>
    </div>
    </body>
    <script>
    <!--v-for 迭代对象-->
    new Vue({
    el:'#forint'
    })
    </script>

    <script>
    <!--v-for 迭代对象-->
    new Vue({
    el:'#forobj',
    data:{
    object:{
    name:'悟空',
    race:'猴子',
    address:'花果山',
    post:'美猴王'
    }
    }
    })
    </script>
    <script>

    <!--v-for -->
    new Vue({
    el:'#vfor',
    data:{
    dogs:[
    {name:'泰迪'},
    {name:'二哈'},
    {name:'金毛'},
    {name:'藏獒'},
    ]
    }
    })
    </script>

    <script>
    <!--v-else-if-->
    new Vue({
    el:'#elseif',
    data:{
    type:'A'
    }
    })
    </script>

    <script>
    <!--v-else-->
    new Vue({
    el:'#else',
    })
    </script>


    <script>
    new Vue({
    el:'#app',
    data:{
    seen:true,
    ok:false
    }
    })
    </script>

    </html>

  • 相关阅读:
    二分+RMQ/双端队列/尺取法 HDOJ 5289 Assignment
    思维题 HDOJ 5288 OO’s Sequence
    树形DP Codeforces Round #135 (Div. 2) D. Choosing Capital for Treeland
    最大流增广路(KM算法) HDOJ 1853 Cyclic Tour
    最大流增广路(KM算法) HDOJ 1533 Going Home
    最大流增广路(KM算法) HDOJ 2255 奔小康赚大钱
    Complete the Word CodeForces
    Gadgets for dollars and pounds CodeForces
    Vasya and Basketball CodeForces
    Carries SCU
  • 原文地址:https://www.cnblogs.com/cxiang/p/10551307.html
Copyright © 2011-2022 走看看