条件渲染

 

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <!-- 模板 view-->
        <div id="app" v-cloak>
            <h2>请选择要听的分享：</h2>
            <label>
                <input type="radio" v-model='value' value="css" name="fe">
                <span>css</span>
            </label>
            <label>
                <input type="radio" v-model='value' value="Javascript" name="fe">
                    <span>Javascript</span>
                </label>
            <label>
                <input type="radio" v-model='value' name="fe" value="nodejs">
                <span>nodejs</span>
            </label>
            <hr>
            <p>您选择了：{{value}}</p>
            <p v-if='value == "css" '>
                你要具备编写html的能力
            </p>
            <p v-else-if='value === "Javascript" '>
                你要具备编写html+css的能力
            </p>
            <p v-else-if='value === "nodejs" '>
                你要具备编写js的能力
            </p>
            <p v-else :style="{color:'red'}">
                还没选择
            </p>
        </div>
        <script>
            // 数据 model
            var data = {
                value: ''
            };
            // vm view-model
            var vm = new Vue({
                el: "#app",
                data: data,
                
            });

        </script>
    </body>
</html>

效果图：

posted @ 2017-05-03 17:15  未知小未来  阅读(174)  评论(0)  编辑  收藏  举报