谷粒学院项目实战47——Vue条件判断、循环与组件

Vue条件判断、循环与组件

1 条件判断
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="ok">是否同意《xxx》</input>
        <h1 v-if="ok">是</h1>
        <h1 v-else>否</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false //默认为fasle,即未选中
            }
        })
    </script>
</body>

</html>
2 循环指令
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <table border="1">
            <!-- index:数据索引,从0开始 -->
            <tr v-for="(user,index) in userList">
                <td>{{index}}</td>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {id:"001",age:50,name:"aa"},
                    {id:"002",age:18,name:"wz"},
                    {id:"003",age:9,name:"pp"}
                ]
            }
        })
    </script>
</body>

</html>
3 组件

组件时vue.js中最强大的功能之一,可以扩展html的标签元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            components: {
                // 组件名称
                "Navbar":{
                    // 组件内容
                    template:"<ul><li>首页</li><li>学员管理</li></ul>"
                }
            }
        })
    </script>
</body>

</html>

不过上面的组件仅仅在当前页面有效,要想在其他html中使用组件扩展的标签,可以在创建js文件,然后导入js文件。js文件代码如下。

Vue.component(
    // 组件名称
    "Navbar",
    {
        // 组件内容
        template:"<ul><li>首页</li><li>学员管理</li></ul>"
    }
)

html测试代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="component/navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>
java全栈日日学 文章被收录于专栏

java全栈每日必学,不要高估自己一年能做的事,不要低估自己十年能做的事

全部评论

相关推荐

不愿透露姓名的神秘牛友
07-24 13:39
在记录秋招的大魔王很...:别被忽悠了,我做了多年销售。我可以告诉你,这就是忽悠你的,销售一定要看底薪也要看提成两者不可缺一。提成是有业绩的时候才拿的到的,谁能保证一直有单状态都好。销售有时候很讲究运气的。底薪是你这个人这个岗位日常工作体现的价值。别小看底薪,你看那些跳槽去做经理主管的,底薪底一些,人家愿意去吗?所以那些说销售靠提成的纯属忽悠,除非他们的业务很容易成单。
点赞 评论 收藏
分享
07-07 12:47
门头沟学院 Java
码农索隆:竟然还真有卡体检报告的
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务