Vue 下拉列表 组件模板
<!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 下拉列表 组件模板的更多相关文章
- Vue 定义组件模板的七种方式(一般用单文件组件更好)
在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render 函数 JSF 单文件组件 在这篇文章中,我将通过 ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- 045——VUE中组件之父组件使用scope定义子组件模板结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue.js的动态组件模板
组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么.评论 ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- 记一次Full GC问题的排查
今天看到监控平台显示项目的Full GC次数过多,查看了一下监控曲线,如下图,发现发生的时间点基本上都是在上午十点之后,到下午五点. 分析:考虑到业务形态,开始初步怀疑是访问人数增多引起的虚拟机内存不 ...
- 超强、超详细Redis入门教程
(1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (有空再补充,有理解错误或不足欢迎指正) (2)Reids的特点 Redis本质上是一个Key-Value类型的 ...
- POJO、JAVABEAN、*O、EJB
POJO: 全称:Plain Old Java Object 解释:纯洁老式的java对象.从任何类继承.也没有实现任何接口,更没有被其它框架侵入的java对象 理解:通常我们常说的实体类 BEAN: ...
- 解决linux下安装nodejs后npm未成功安装的问题
1.下载npm软件包 点击链接进入下载页面:npm下载 2.下载完成后将压缩包放到家目录下就可以(也可以放到其他地方) 3.解压 tar -zxvf 压缩包名称,解压后你会得到一个文件夹,进入后是这样 ...
- 你不知道的JavasScript上篇·第三章·对象
1.Object.defineProperty()&&getter.setter Object.defineProperty(目标对象,属性名(string型),{ get:funct ...
- FI配置步骤清单
1.定义公司代码 配置路径: R/3定制IMG的实施指南>企业结构>定义>财务会计>定义, 复制, 删除, 检查公司代码 事务代码 EC01 2.编辑科目表清单 配置路 ...
- 使用Git上传代码到Github仓库
准备工作: 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下载地址,下载后一路直接安装即可: http ...
- jquery中使用datepicker限制开始日期小于结束日期
这里是使用Jquery插件实现的,这段代码来自于网络.感觉很实用,就做笔记记录下来. 原文:http://blog.csdn.net/tianyacao8025/article/details/707 ...
- Android开发中使用七牛云存储进行图片上传下载
Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...
- Linux学习---linux下的彩蛋和各种有趣的命令
[原文]https://www.toutiao.com/i6596596897392099844/ screenfetch 一个显示系统信息和主题信息的命令 使用方法 输入screenfetch 效果 ...