<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.active {
color: red;
}
.text-success {
color: #009966;
font-size: 20px;
}
.fontWeight {
font-weight: bold;
}
</style>
</head>
<body>
<div id="list">
<ul>
<div v-bind:class="[fontWeight,textSuccess]">欢迎品尝</div>
<input type="text" v-model="moonstuffing" maxlength="5" placeholder="请输入您喜欢的月饼馅" />
<div v-bind:class="classObject">中秋节月饼馅</div>
<li v-for="item in mooncake">{{item}}</li>
</ul>
<div v-bind:style="obj">花好月圆夜</div>
<my-component v-bind:class="textSuccess" v-bind:message="txt"></my-component>
<!--自定义UI组件-->
<user-input v-if="ok" :message="user.loginType" :changevalue="changevaluefn" :values="username" :types="user.textType" :placeholdertext="user.placeText" key="username"></user-input>
<user-input v-else :message="user.loginType" :changevalue="changevaluefn" :values="useremail" :types="user.textType" :placeholdertext="user.placeText" key="useremail"></user-input>
<button @click="change">点击切换</button>
<hr />
<!--<template> 元素当做包装元素-->
<template v-if="qiehuan">
<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="tab">点击切换（使用包装元素）</button>
<hr />
<div v-show="ok">
哈哈我显示了
</div>
<!-- v-for v-if 结合使用-->
<h1> v-for v-if 结合使用</h1>
<ul>
<li v-for = "item in money" v-if="item.price <= 40">{{item.txt}}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
Vue.component('user-input', {
template: '<div><label>{{message}}</label><input :value="values" @input="changevalue" @onpropertychange="changevalue" :type="types" :placeholder="placeholdertext"></div>',
props: ["message", "types", "placeholdertext","values","changevalue"],
})
Vue.component('my-component', {
template: '<p class="foo bar">{{message}}</p>',
props: ["message"]
})
var moon = new Vue({
el: "#list",
data: {
ok:true,
qiehuan:true,
isActive: true,
isSuccess: true,
moonstuffing: '',
mooncake: ["蛋黄", "五仁", "豆沙", "莲蓉"],
fontWeight: "fontWeight",
textSuccess: "text-success",
txt: "哈哈",
activeColor: "red",
fontSize: 60,
obj: {
color: "red",
fontSize: "60px"
},
user: {
loginType: "username",
textType: "email",
placeText: "请输入用户名"
},
username:'用户名',
useremail:'邮箱',
money:[
{price: 10,txt:"10元"},
{price: 20,txt:"20元"},
{price: 30,txt:"30元"},
{price: 40,txt:"40元"},
{price: 50,txt:"50元"},
{price: 60,txt:"60元"},
{price: 70,txt:"70元"},
{price: 80,txt:"80元"}
]
},
methods: {
change: function() {//点击按钮切换
if(this.ok) {
this.ok = false;//控制组件显示隐藏
this.user = {
loginType: "email",
textType: "email",
placeText: "请输入邮箱"
}
} else {
this.ok = true;//控制组件显示隐藏
this.user = {
loginType: "username",
textType: "text",
placeText: "请输入用户名"
}
}
},
changevaluefn:function(e){//监听值变化
var e = e || window.event;
var target = e.target || e.srcElement;
if(this.ok) {
this.username = target.value //接收用户名
} else {
this.useremail = target.value//接收邮箱
}
},
tab:function() {//点击按钮切换
if(this.qiehuan) {
this.qiehuan = false;
} else {
this.qiehuan = true;//控制组件显示隐藏
}
}
},
watch: { //监听数据发送改变
moonstuffing: function(newValue, oldValue) { //监听属性
console.log(oldValue)
if(newValue != '') {
moon.mooncake.push(newValue)
moon.isActive = true;
} else {
moon.isActive = false;
}
}
},
computed: {
classObject: function() {
return {
active: this.isActive,
'text-success': this.isSuccess
}
}
}
})
</script>
</html>
