1、if,else:
<body> <div id ="app"> <!-- 复杂判断还是推荐使用computed计算 --> <h2 v-if="score >= 90"> <div>优秀</div> </h2> <h2 v-else-if="score >= 60"> <div>良好</div> </h2> <h2 v-else> <div>不及格</div> </h2> {{message}} </div> <script> //创建Vue实例,得到 ViewModel const vm = new Vue({ el: '#app', data: { message: 'Smallstars', isShow: true, score: 95 }, methods: {}, computed: {}, }); </script> </body>
2、条件渲染:
<body> <div id ="app"> <!-- 如果没有用key标识,会复用输入框,内容不会清空,key值设置需不同才行 --> <span v-if="isUser"> <label for="username">用户账户</label> <input type="text" id="username" placeholder="用户账户" key="username"> </span> <span v-else=""> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" key="emil"> </span> <button @click="isUser = !isUser">切换类型</button> </div> <script> //创建Vue实例,得到 ViewModel const vm = new Vue({ el: '#app', data: { message: 'Smallstars', isUser: true }, methods: {}, computed: {}, }); </script> </body>