假期vue学习笔记13 插槽

时间：2024-02-28 17:59:51浏览次数：27

标签：Category 13 vue title 插槽 width export background

<template> <div class="category"> <h3>{{title }}分类</h3> <slot></slot> </div> </template>
<script> export default{ name:'Category', props:['title'] } </script>
<style> .category{ background-color: skyblue; width: 200px; height: 300px; } img{ width: 100%; } video{ width: 100%; } </style> <template> <div class="container"> <Category title="美食" > <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""> </Category>
<Category title="游戏" > <ul> <li v-for="(item,index) in games" :key="index">{{item}}</li> </ul> </Category>
<Category title="电影" > <video controls src=""></video> </Category> </div> </template>
<script>
import Category from './components/Category.vue';
export default{ name:'App', components:{ Category }, data() { return { foods:['火锅','烧烤','小龙虾','牛排'], games:['红色警戒','穿越火线','劲舞团','超级玛丽'], films:['教父','拆弹专家','不不不','男男女女'] } }, } </script>

<style lang="css"> .container{ display: flex; justify-content: space-around; } h3{ text-align: center; background-color: orange; } </style>

标签：Category,13,vue,title,插槽,width,export,background
From： https://www.cnblogs.com/hbro/p/18041258

假期vue学习笔记14 求和案例vue版本
<template> <div> <h1>当前求和为：{{sum}}</h1> <selectv-model.number="n"> <optionvalue="1">1</option> <optionvalue="2">2</option>......
假期vue学习笔记15 求和mapstate_mapgetter
importVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store'Vue.config.productionTip=falsenewVue({ el:'#root', render:h=>h(App), store, beforeCreate(){ Vue.......
假期vue学习笔记16 vuex多组数据共享
<template> <div> <h1>当前求和为：{{sum}}</h1> <h1>十倍的和为：{{bigSum}}</h1> <h1>{{xuexiao}}</h1> <h1>{{xueke}}</h1> <h3>下方总人数为：{{$store.state.personList......
假期vue学习笔记07 todo事件的本地存储
用本地存储改写前面的todo案例 <template> <li> <label> <inputtype="checkbox":checked="todo.done"@change="handleCheck(todo.id)"/> <spanv-show="!tod......
假期vue学习笔记08 绑定和解绑
<template> <divclass="app"> <h1>{{msg}}</h1>  <School:getSchoolName="getSchoolName"/> <!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第一种写法，使用@过v-......
假期vue学习笔记09 全局事件总栈
<template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div></template><script> exportdefault{ name:'School'......
假期vue学习笔记10 pubsub
<template> <divclass="app"> <h1>{{msg}}</h1> <School/> <Student/> </div></template><script>importStudentfrom'./components/Student.vue'imp......
假期vue学习笔记11 动画
<template> <divid="root"> <Test/> <Test2/> <Test3/> </div></template><script>importTestfrom'./components/Test.vue'importTest2from'./comp......
假期vue学习笔记01 ref
<template> <div> <h1v-text="msg"ref="title"></h1> <button@click="showDOM">点我输出上方的DOM元素</button> <School/> </div></template><script......
假期vue学习笔记02 mixin
<template> <div > <h2@click="showName">学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div></template><script> exportdefault{ name:'School'......

假期vue学习笔记13 插槽

相关文章

赞助商

阅读排行