<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中v-if的常见使用</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function () {
//创建一个vue实例
var app = new Vue({
el: '#app',
data: {
type: 'A',
loginType: 'username'
},
methods: {
changeloginType() {
let self = this;
if (self.loginType == 'username') {
self.loginType = ''
} else {
self.loginType = 'username'
}
},
vuekeydowns: function (event) {
var keycode = event.keyCode;
if (keycode == 13) {
this.type = document.getElementById("username").value
}
}
}
})
}
</script>
<body>
<div id="app">
<div style="color:red">v-if的简单实用</div>
<template>
<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>
没匹配项
</div>
</template>
<div style="color:green">v-if的弹框切换</div>
<template v-if="loginType === 'username'">
<label>用户名：</label>
<input id="username" placeholder="Enter your username" @keydown="vuekeydowns($event)" key="username-input">
</template>
<template v-else>
<label>密码：</label>
<input id="password" placeholder="Enter your email address" @keydown="vuekeydowns($event)" key="email-input">
</template>
<button @click="changeloginType()">切换状态</button>
</div>
<!--
v-show : 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。
v-if :
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换
-->
<div id="appone">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换来控制文字显示</button>
</div>
<script>
new Vue({
el: '#appone',
data: {
flag: true,
},
methods: {
toggle: function () {
// alert("toggle");
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
常见资源合集和破解 fmvvvteih...