Vue下拉菜单实例demo

效果图:

代码 

 1 //  组件三大块:样式结构  行为逻辑  数据
 2 // //注册组件   组件名   组件描述
 3 //注册组件  
 4 
 5 // var obj = {
 6 // 不能共享一个对象 不然显示会一起运行
 7 //     selectShow: false
 8 // }
 9 Vue.component("custom-select", {
10         data: function() {
11             return {
12                 selectShow: false,
13                 val: ""
14             };
15         },
16         props: ["btnValue", "list"],
17         template: `
18
19
20 21 22 23
24 list 25 v-show="selectShow" 26 :zujlist="list" 27 v-on:receive="changeValue"> 28
29
`, 30 methods: { 31 changeValue: function(value) { 32 this.val = value; 33 } 34 } 35 }) 36 //子组件 绑定 自定义事件 父组件监听子组件changvalue 当子组件发生改变 通过receive通知父组件 用$emit 37 Vue.component("custom-list", { 38 props: ["zujlist"], 39 template: `
    40
  • for="item of zujlist" @click="selectValuehandle(item)">{{item}}
  • 41
`, 42 methods: { 43 selectValuehandle: function(item) { 44 //点击之后把子组件的值传递给父组件中 45 //用到自定义事件 46 //触发自定义事件 47 this.$emit("receive", item) 48 } 49 } 50 51 }) 52 53 new Vue({ 54 el: "#app", 55 data: { 56 list1: ["北京", "上海", "杭州"], 57 list2: ["吃饭", "睡觉", "打豆豆"] 58 } 59 60 61 }) 62 //this 指当前 vue的实例 63 //父组件 传值 子组件 : 自定义标签 上 设置自定义属性 (驼峰命名) 用props 64 //data 不能兑现形式存在 用函数形式 函数里面 return一个对象 65 // 子组件 66 //methods函数 必须放在对应组件 方法下面 尔不是 主程序vue里面 67 68 //单向数据流

HTML

DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/vue.js">script>
head>

<body>
    <div id="app">
        <div style="float:left;">
            <h2>自定义的下拉框h2>
            <custom-select btn-Value="查询" :list="list1">custom-select>

        div>
        <div style="float:left;">
            <h2>自定义的下拉框2h2>
            <custom-select btn-Value="搜索" :list="list2">custom-select>
        div>
    div>
    
    <script src="js/select.js">script>
body>

html>

 

转载于:https://www.cnblogs.com/h5monkey/p/6734008.html

你可能感兴趣的:(Vue下拉菜单实例demo)