谷粒学院项目实战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全栈每日必学，不要高估自己一年能做的事，不要低估自己十年能做的事
