<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作用域插槽</title>
<style type="text/css">
.current {
color: orange;
}
</style>
</head>
<body>
<div id='app'>
<fruit-list :list='list'>
<template slot-scope='slotProps'>
<strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</fruit-list>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//- 父组件对子组件加工处理
//- 既可以复用子组件的slot,又可以使slot内容不一致
Vue.component('fruit-list', {
props: ['list'],
template: `
<div>
<li :key='item.id' v-for='item in list'>
<slot :info='item'>{{item.name}}</slot>
</li>
</div>
`
});
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: 'apple'
}, {
id: 2,
name: 'orange'
}, {
id: 3,
name: 'banana'
}]
}
});
</script>
</html>
Vue之作用域插槽
转载
世界不会因为你的疲惫,而停下它的脚步
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:lims-erd-检测流程
下一篇:MyBatis实现增删改查
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Python基础笔记-函数的作用、返回值、参数、作用域
主要记录了函数以及函数的参数、返回值、执行、传参、作用域等内容。
作用域 数据 全局变量 函数 Python基础 -
【Vue】作用域插槽
作用域插槽
vue.js javascript 前端 插槽 数据 -
[vue] slot插槽 默认插槽,具名插槽,作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果
vue.js 插槽 App 作用域 -
【Vue】 slot插槽、具名插槽和作用域插槽
目录1. 为什么使用插槽?2. 内容插槽3. 具名插槽4. 作用域插槽5. 动态插槽名6. 具名插槽的缩写1. 为什么使
vue js javascript 插槽 作用域 -
vue+element作用域插槽
作用域插槽的样式由父组件决定,内容却由子组件控制。在el-table使用作用域插槽<el-table> <el-table-column
vue.js javascript 前端 ico 作用域 -
Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样。
VUE 作用域插槽 html css 复用 -
python设置对象zhi
Python其实也被称为面向对象的预研,和C++/Java一样,具有面向对象预研的多态、封装、方法和特性等概念。关乎面向对象的概念这里不讲述,就看看Python里的类和对象的定义和使用相关的知识。 1)定义类 类的定义很简单
python设置对象zhi python教程 Python 下划线 命名空间