vue（v-if,v-else-if-else-show）

基本应用

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<body>
<div id ="app">年龄<input type="text"  v-model="age">经判断为<span v-if="age<=35">年轻人</span><span v-else-if="age > 35 && age < 60">中年人</span><span v-else>老年人</span><br><br></div>
</body>
<script>
//定义vue对象new Vue({el:"#app",//vue接管区域data:{age:20},methods:{}})
</script>
</html>

对比一下v-show

  年龄<input type="text"  v-model="age">经判断为<span v-show="age<=35">年轻人</span><span v-show="age > 35 && age < 60">中年人</span><span v-show="age>=60">老年人</span>

区别

一个是不渲染，一个是display为none

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<body>
<div id ="app"><div v-for="addr in addrs">{{addr}}</div><div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
</div>
</body>
<script>
//定义vue对象new Vue({el:"#app",//vue接管区域data:{addrs:["北京","上海","西安","深圳"]},methods:{}})
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/28184.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！