Vue.js条件渲染实践-优快云博客

准备步骤如第一天

代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<!--v-if指令，判断-->
<div id="app1">
    <p v-if="ok">测试条件判断</p>
    <p v-if="no">测试条件判断</p>
    <button v-on:click="ceshi">测试按钮</button>
</div>
<br>

<!--v-if-->
<div id="app2">
    <p v-if="message==='a'">{{message}}=a</p>
    <p v-else-if="message==='b'">{{message}}=b</p>
    <p v-else>{{message}}={{message}}</p>
</div>
<br>

<!--v-show 指令-->
<div id="app3">
    <h1 v-show="ok">Hello!</h1>
</div>
</body>
<script type="text/javascript">
    /*v-if指令*/
    /*   new Vue({
           el:'#app1',
           data:{
               ok:true,
               no:false
           },methods:{
               ceshi:function () {
                   data:{
                       no:'false'
                   }
               }
           }
       })*/

    /*    /!*v-if-else指令*!/
        new Vue({
            el:'#app2',
            data:{
                message:'b'
            }
        })*/

    /*v-show 指令*/
    new Vue({
        el: '#app3',
        data: {
            ok: true
        }
    })
</script>
</html>

Vue第三天（条件语句）