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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
随机推荐
- JavaScript--DOM进阶(20)
// DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;再比如Text类型;表示的是文本节点; 一 DOM类型 类型名 说明 Node 表示所有类型值的统一接口,IE ...
- django-全文检索
全文检索不同于特定字段的模糊查询,使用全文检索的效率更高,并且能够对于中文进行分词处理 需要的第三方库: haystack:django的一个包,可以方便地对model里面的内容进行索引.搜索,设计为 ...
- Java 取得文件名的后缀
作者QQ:1095737364 QQ群:123300273 欢迎加入! 文件上传的时候可能需要修改文件名,因此需要取得文件的后缀: String filename="123.t ...
- equals与hashcode区别
哈希码: hashCode的作用是用来获取哈希码,也可以称作散列码.实际返回值为一个int型数据.用于确定对象在哈希表中的位置. Object中有hashcode方法,也就意味着所有的类都有has ...
- iTerm通过堡垒机自动登录服务器
为了保障网络和数据安全,越来越多公司使用堡垒机.iTerm作为一个好用的终端利器,要实现自动通过堡垒机登录服务器的方式有多种.下面我就来介绍一种通过expect脚本的方式完成配置. 第一步,进入/us ...
- Dynamics 365Online 通过插件中的retrievemultiple消息来过滤产品视图
本篇中要讲的是对产品视图基于某个条件进行过滤显示,而手段就是通过插件中的retrievemultiple消息,可能很多人都写过对它都不陌生. 先来看张插件注册的截图,插件的message是retrie ...
- 关于TCP/IOCP构架中出现的假死连接解决方案
如果在2台不同的公网机器,对TCP的c/s做过详细的压力测试,那么很不幸,会有很多人发现自己的server端会出现大量的假死连接. 假死连接具体表现如下: 1.在s端机器上,会有一些处于TCP_EST ...
- fastjson 反序列化漏洞利用总结
比赛遇到了,一直没利用成功,这里做个记录. 环境搭建 首先用 vulhub 搭建 fastjson 的漏洞环境. 漏洞环境程序的逻辑为接收 body 的数据然后用 fastjson 解析. 漏洞利用 ...
- webpack中配置Babel
Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...
- 如何在 Azure 中均衡 Windows 虚拟机负载以创建具有高可用性的应用程序
负载均衡通过将传入请求分布到多个虚拟机来提供更高级别的可用性. 本教程介绍了 Azure 负载均衡器的不同组件,这些组件用于分发流量和提供高可用性. 你将学习如何执行以下操作: 创建 Azure 负载 ...