html中
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="element">
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
<template v-if="ok">
<h1>第二次测试</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<div v-if="Math.random() > 0.5">
<h3>第3次测试</h3>
</div>
<div v-else>
<h3>第3（1）次测试</h3>
</div>
<div v-if="type === 'A' ">
<h3>第4次测试</h3>
</div>
<div v-else-if="type === 'B'">
<h3>第4（1）次测试</h3>
</div>
<div v-else-if="type === 'C'">
<h3>第4（2）次测试</h3>
</div>
<div v-else>
<h3>第4（3）次测试</h3>
</div>
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</br>
<button @click='toggleLoginType'>Toggle login type</button>
</br>
<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>
<h1 v-show='ok'>Hello </h1>
</div>
</body>
</html>
Vue.component('my-component',{
template:''
})
let vm = new Vue({
el:'#element',
data:{
awesome:true,
ok:false,
type:'A',
loginType:''
},
methods:{
toggleLoginType:function(){
if(this.loginType !== 'username'){
this.loginType='username'
}else if (this.loginType === 'username'){
this.loginType=''
}
}
}
})
- 2点想法
- 使用props其实传递是父组件中的同名变量
- 方法是使用methods,如果要修改data中的数据属性，需要提前加this
