JavaWeb开发6

2024/10/23 23:30:53 来源：https://blog.csdn.net/2303_78029885/article/details/143119951 浏览: 次关键词：JavaWeb开发6

Vue指令

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hello</title><script src="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>
年龄<input type="text" v-model="age">经判定，为：<span v-show="age<=35">年轻人</span><span v-show="age>35&&age<60">中年人</span><span v-show>老年人</span></div><!-- built files will be auto injected --></body>
<script>new Vue({el:"#app",//vue接管区域data:{age:20},method:{
}})
</script>
</html>

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>hello</title><script src="vue.js"></script></head><body>
<div id="app"><div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div></div><!-- built files will be auto injected --></body>
<script>new Vue({el:"#app",//vue接管区域data:{addrs:["bj","sh","xa","cd","sz"]},method:{
}})
</script>
</html>