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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- PHP中按值传递和引用传递的区别
有次跟朋友讨论对象传值的方式时提到引用传值时,在大脑中搜索五秒钟,果断确定在这两个项目当中并没有用到.今天去问了一下度娘,顺便做了个小测试: 按值传递: 引用传递: 按值传递中原来参数的值在调用其他函 ...
- java的XML解析(DOM4J技术)
DOM4J技术解析XML文件 一,XML简介 xml (可扩展标记语言) 全称: Extended Markup Language 可扩展的含义:允许程序员按照自己的想法去扩展新的标签 注意:但是扩 ...
- PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆
PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆 什么是cookie 服务器在客户端保存用户的信息,比如登录名,密码等 这些数 ...
- Canvas：飞机大战 -- 游戏制作
Canvas:飞机大战 最开始我们要初始化信息,我们有五个状态:游戏封面,加载状态,运行状态,游戏暂停,游戏结束. 我们还需要 得分--score,生命--life. var START = 1;/ ...
- 【读书笔记】iOS-关闭键盘的2种方法
一种是通过使用键盘上的return键关闭键盘,一种是通过触摸背景关闭键盘. 参考资料:<iOS7开发快速入门>
- event.stopPropagation与event.preventDefault的区别
1.event.stopPropagation 停止事件的传播,阻止它被分配到其它Dom节点.但是不能阻止同一Dom节点上的其它事件句柄被调用. 注:不同Dom节点的事件必须是一致的.如父节点和子节点 ...
- ubutu强制关闭应用程序的方法
1.打开终端,输入命令 top 2.查看应用程序PID号,比如是8080 3.然后终端输入 kill 8080 ,行了
- 如何通过REST API登录Portal for ArcGIS
Portal for ArcGIS 提供了两种登录方式:OAuth 2.0和传统的token登录方式. OAuth 2.0的登录原理在之前的一篇文章中已经描述,所以今天就不重复了.下面将介绍对于不支持 ...
- Spring 笔记 -06- 从 MySQL 建库到 登录验证数据库信息（maven）
Spring 笔记 -06- 从 MySQL 建库到 登录验证数据库信息(maven) 本篇和 Spring 没有什么关系,只是学习 Spring,必备一些知识,所以放在这里了. 本篇内容: (1)M ...
- python appium笔记（一）：appium android环境配置及示例
(一) 简介 Appium是一个开源的自动化测试框架,可以用来测试基于iOS.Android和Firefox OS平台的原生和混合应用.该框架使用Selenium Webdriver,在执行测试时和 ...