vue中的条件渲染例子
<!DOCTYPE html>
<html>
<head>
<title>vue中的条件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<div v-if="show">{{message}}</div>
<div v-show="show">{{message}}</div>
</div>
<div id='app-1'>
<div v-if="show === 'a'">This is A</div>
<div v-else-if="show === 'b'">This is B</div>
<div v-else>This is others</div>
</div>
</div>
<div id='app-2'>
<div v-if="show">
用户名: <input key="username"/>
</div>
<div v-else>
邮箱名: <input key="email"/>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show: false,
message:"Hello World"
}
})
var vm1 = new Vue({
el:'#app-1',
data:{
show: "a",
}
})
var vm2 = new Vue({
el:'#app-2',
data:{
show: false,
}
})
</script>
</body>
</html>
网友评论