<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: "microsoft yahei","arial";font-size: 14px;margin: 5px 10px;line-height: 30px;}
ul{list-style: none;}
div{border-bottom: 1px solid #999;}
</style>
</head>
<body>
<!--if条件判断执行一个-->
<div id="test">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<!--点击切换-->
<div id="app">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="change">转换</button>
</div>
<!--if和for循环-->
<div id="mingle">
<ul>
<li v-for="mingleList in mingleList">{{mingleList.text}}</li>
</ul>
<ul>
<li v-for="mingleList in mingleList">
<span v-if="mingleList.text=='HTML'">{{mingleList.text}}界面</span>
<span v-else-if="mingleList.text=='JQuery'">{{mingleList.text}}框架</span>
<span v-else>{{mingleList.text}}逻辑</span>
</li>
</ul>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var test=new Vue({
el:'#test',
data:{
type:'s'
}
});
var Vm=new Vue({
el:'#app',
data:{
loginType:'username'
},
methods:{
change:function(){
if(this.loginType!='username'){
return this.loginType='username'
}
return this.loginType='Email'
}
}
});
var mingleVm=new Vue({
el:'#mingle',
data:{
mingleList:[{
text:'HTML'
},{
text:'JQuery'
},{
text:'JavaScript'
}]
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: "microsoft yahei","arial";font-size: 14px;margin: 5px 10px;line-height: 30px;}
ul{list-style: none;}
div{border-bottom: 1px solid #999;}
</style>
</head>
<body>
<!--if条件判断执行一个-->
<div id="test">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<!--点击切换-->
<div id="app">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="change">转换</button>
</div>
<!--if和for循环-->
<div id="mingle">
<ul>
<li v-for="mingleList in mingleList">{{mingleList.text}}</li>
</ul>
<ul>
<li v-for="mingleList in mingleList">
<span v-if="mingleList.text=='HTML'">{{mingleList.text}}界面</span>
<span v-else-if="mingleList.text=='JQuery'">{{mingleList.text}}框架</span>
<span v-else>{{mingleList.text}}逻辑</span>
</li>
</ul>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var test=new Vue({
el:'#test',
data:{
type:'s'
}
});
var Vm=new Vue({
el:'#app',
data:{
loginType:'username'
},
methods:{
change:function(){
if(this.loginType!='username'){
return this.loginType='username'
}
return this.loginType='Email'
}
}
});
var mingleVm=new Vue({
el:'#mingle',
data:{
mingleList:[{
text:'HTML'
},{
text:'JQuery'
},{
text:'JavaScript'
}]
}
});
</script>
</body>
</html>
