<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Vue 下拉列表 组件模板</title>

    </head>

    <body>

        <div id="app">

            用户角色：<dsh-select-list :items='roles'></dsh-select-list>

            商品分类：<dsh-select-list :items='types'></dsh-select-list>

        </div>

        <!-- 定义组件模板 -->

        <template id="template">

            <select>

                <option value="-1">请选择</option>

                <option v-for="item in items" v-bind:value="item.id">{{item.name}}</option>

            </select>

        </template>

        <script src="vue.js"></script>

        <script>

            //1.创建组件

            Vue.component("dsh-select-list", {

                props: ['items'],

                template: '#template'

            });

            //2.初始化

            var app = new Vue({

                el: "#app",

                data: {

                    //数组:用户角色

                    roles: [{

                            id: 1,

                            name: "管理员"

                        },

                        {

                            id: 2,

                            name: "普通用户"

                        }

                    ],

                    //数组:商品分类

                    types: [{

                            id: 1,

                            name: "零食"

                        },

                        {

                            id: 2,

                            name: "数码"

                        },

                        {

                            id: 3,

                            name: "生活用品"

                        },

                    ]

                }

            })

        </script>

    </body>

</html>

Vue 下拉列表 组件模板的更多相关文章

  1. Vue 定义组件模板的七种方式(一般用单文件组件更好)

    在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过 ...

  2. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  3. 045——VUE中组件之父组件使用scope定义子组件模板结构

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue.js的动态组件模板

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...

  5. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  6. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  7. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  8. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  9. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

随机推荐

  1. [SDOI2010]猪国杀

    题面 (这个做题面的大佬太赞啦) 无聊啊~~~然后就写大模拟,然后就从早上写到下午,生活得到了极大的充实 注意事项: 牌库为空之后再抽牌,会重复抽最后一张被抽走牌 无论在任何过程中,游戏结束(主公死或 ...

  2. js-ES6学习笔记-Proxy

    1.Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. 2.Proxy 可以理解成,在目标对象之前架设 ...

  3. [基础知识]PeopleSoft应用服务器上的进程含义

    1.PSAPPSRV PSAPPSRV作用是用来构建和报错HTML页面,运行peoplecode,处理消息和处理用户机器的sql请求.他还在用户机器最初登陆时候执行用户身份验证的任务. 2.PSSAM ...

  4. 搭建ReactNative时的最普遍的错误—— ":CFBundleIdentifier", Does Not Exist

    报错 ":CFBundleIdentifier", Does Not Exist 今天搭建Reactnative 报错 注意当你第一次搭建RN时,包体下载的都是最新的版本,由于现在 ...

  5. 葡萄城报表V11 SP2新版本震撼发布！

    葡萄城报表正式发布 v11.2 版本,强势推出国内首创的基于HTML5的在线报表设计器,从此报表设计告别桌面应用程序,随时随地修改报表,真正跨平台操作,从而使任何报表用户更快速的响应报表业务变化! 在 ...

  6. 配置方法数超过 64K 的应用

    随着 Android 平台的持续成长,Android 应用的大小也在增加.当您的应用及其引用的库达到特定大小时,您会遇到构建错误,指明您的应用已达到 Android 应用构建架构的极限.早期版本的构建 ...

  7. java持有对象【2】ArrayList容器续解

    此为JDK API1.6.0对ArrayList的解释. ArrayList 使用java泛型创建类很复杂,但是应用预定义的泛型很简单.例如,要想定义用来保存Apple对象的ArrayList,可以声 ...

  8. [Objective-C] id类型和instancetype类型

    前些时间在源码里看到instancetype返回类型,一脸惊异,表示接触iOS不久没见过这东西,但发现跟id功能差不多.故查了一些资料,了解了两者之间的区别,故将资料简单翻译整理了一下,为博客充一个数 ...

  9. SQL语句创建数据库及表

    --删除数据库drop database ArchiveDev; --建立归档数据库CREATE DATABASE ArchiveDev; USE ArchiveDev;GO --1.建立归档计划执行 ...

  10. Ubuntu安装ffmpeg

    二.linux源码安装: 如下: 下载 源码包:http://ffmpeg.org/releases/ffmpeg-3.3.tar.bz2 1.从网络上下载到的源码包,然后解压到指目录 假设下载目录 ...