<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>自定义的下拉框</h2>
<customer-selector btn-value="查询"></customer-selector>
<h2>自定义的下拉框2</h2>
<customer-selector btn-value="搜索"></customer-selector>
</div>
<script>
// var obj = {
// selectShow: false
// };
//全局注册组件
Vue.component("customer-selector",{
data: function () {
return {
selectShow: false
};
},
props:["btnValue"],
template: `<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyword" value="" @click="selectShow = !selectShow">
<input type="button" :value="btnValue">
<span></span>
</div>
<custom-list v-show="selectShow"></custom-list>
</div>
</section>`
});
Vue.component("custom-list",{
template: `<ul class="list">
<li>html+css</li>
<li>html5+css3</li>
<li>javascript</li>
<li>angular</li>
<li>vue</li>
<li>react</li>
<li>jquery</li>
<li>nodejs</li>
</ul>`
})
new Vue({
el: "#app",
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
