<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
.box,.box1{width:100px;height: 100px;background: red;}
.box1{background: royalblue;}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="flag" />
<!--
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
所以 Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。
只需添加一个具有唯一值的 key 属性即可
-->
<div class="box" v-if="flag" key="a">
<input type="text" />
</div>
<div class="box1" v-else key="b">
<input type="text" />
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
网友评论