<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cur{
color:orange;
}
</style>
</head>
<body>
<!--
作用域插槽：
应用场景：父组件对子组件的内容进行加工处理
-->
<div id="app">
<fruit-list :list='list'>
<template slot-scope='slotProps'>
<strong v-if="slotProps.info.id == 2" class="cur">{{slotProps.info.name}}</strong>
<span v-else>{{slotProps.info.name}}</span>
</template>
</fruit-list>
</div>
<script src="./vue/vue.js"></script>
<script>
Vue.component('fruit-list',{
props:['list'],
template:`
<div>
<li :key='item.id' v-for='(item,index) 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"
}]
},
methods:{}
}
);
</script>
</body>
</html>
网友评论