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>