基本应用
例子
<!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>