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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- Could not transfer artifact org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from/to central
问题: maven安装完成,环境变量配置没有问题,cmd窗口运行mvn compile的时候报错如下: Plugin org.apache.maven.plugins:maven-resources- ...
- Atcoder：AGC004F Namori
传送门 先考虑树,树是一个二分图. 看到是二分图并且每次是对两边的同色的点反色可以想到转化:让奇数层的点为黑,偶数为白,变成每次可以交换两个点的颜色. 把黑看成 \(-1\),白看成 \(1\),那么 ...
- HTML5 简单归纳 -- 前端知识 （二）
HTML5 全屏事件 全屏事件:requestFullScreen 关闭全屏:cancelFullScreen 判断是否全屏:fullScreenElement 注意:现各大主流浏览器中由于内核不同的 ...
- Mobileye众包地图REM的一些整理
Mobileye的CEO Shashua在CVPR2016上介绍了Road Experience Management(REM),目前仍是视觉高精度地图和定位的(几乎)唯一的解决方案.这两年间,mob ...
- 代码操作Word时，目录自动更新的两种方法
最近的项目中有一个功能点为:根据分析数据库并生成报告.不过不是大数据.数据挖掘之类,报告的内容.组织方式都是事先固定下来的.实现的方式为,在普通word文档中插入书签制成模板,然后程序使用OpenXM ...
- Android--WebView 自适应代码
//WebView自适应代码 private String getHtmlData(String bodyHTML) { String head = "<head>" ...
- mysql如何修改开启允许远程连接
关于mysql远程连接的问题,大家在公司工作中,经常会遇到mysql数据库存储于某个人的电脑上,大家要想连接mysql服务,装有mysql服务的电脑就必须开启远程连接 第一步,用dos连接上你的数据库 ...
- Windows2003系统如何设置能让两个人共用一个桌面同时远程控制？
在windows 2003上,可以两人同时同一桌面控制一台服务器,交流非常方便. 解决方案: 两人都用终端远程登陆到服务器上,其中一人在“开始”--“管理工具”--“终端服务管理器”,选中对方的用户名 ...
- NodeJS中MySql的增删改查操作
纯粹记录一下最基础写法,几乎没有写什么逻辑,写法也并不是很完善(因为我自己也刚刚摸索出来这么写可以...= =!) 望高手指教 也希望能够帮到比我还新的新手.... //1.insert操作 ...
- 参数innodb_force_recovery影响了整个InnoDB存储引擎的恢复状况
参数innodb_force_recovery影响了整个InnoDB存储引擎的恢复状况.该值默认为0,表示当需要恢复时执行所有的恢复操作.当不能进行有效恢复时,如数据页发生了corruption,My ...