四. Container 布局容器
- 用于布局的容器组件，方便快速搭建页面的基本结构。
创建一个布局容器
<el-container> </el-container>
容器中包含的子元素
<el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 <el-footer>：底栏容器。
嵌套容器
<el-container> <el-header><div><h1>我是标题</h1></div></el-header> <el-container> <el-aside><div><h1>我是菜单</h1></div></el-aside> <el-main><div><h1>我是内容</h1></div></el-main> </el-container> <el-footer><div><h1>我是底部</h1></div></el-footer> </el-container>
容器的属性
注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平
五. Radio 单选框
- 在一组备选项中进行单选
创建一个单选按钮
<el-radio >男</el-radio> <el-radio>女</el-radio>
- 此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的
value / v-model和label属性进行使用。
<template> <div> <h1>radio组件的使用</h1> <!--组件创建--> <el-radio v-model="label" label="男">男</el-radio> <el-radio v-model="label" label="女">女</el-radio> </div> </template> <script> export default { name: "Radio", data(){ return{ label:'女' } } } </script>
Radio按钮属性的使用
<el-radio v-model="label" name="sex" disabled label="男">男</el-radio> <el-radio v-model="label" name="sex" label="女">女</el-radio>
- 总结：属性的使用还是直接写在对应的组件标签上以
属性名 = 属性值的方式使用。
Radio事件的使用
- 事件的使用也和属性的使用是一致的都是写在对应的组件标签上
- 事件在使用时必须使用vue中绑定事件方式进行使用如
@事件名=事件处理函数(绑定在vue组组件中对应函数)
<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio> <el-radio v-model="label" @change="aa" name="sex" label="女">女</el-radio> <script> export default { methods:{ aa(){ console.log(this.label) } } } </script>
Radio单选按钮组的使用
<el-radio-group v-model="radio"> <el-radio label="3">备选项3</el-radio> <el-radio label="6">备选项6</el-radio> <el-radio label="9">备选项9</el-radio> </el-radio-group> <script> export default { data(){ return{ radio: '3' } }, methods:{ bb(){ console.log(this.radio) } } } </script>
六. Checkbox 多选框
- 一组备选项中进行多选
创建Checkbox
<el-checkbox>北京</el-checkbox>
- 使用
<el-checkbox>标签去构建我们的checkbox日后我们checkbox的值可以通过v-model进行绑定(true|false)。
属性和事件的使用
<el-checkbox v-model="checked" @change="aa" :true-label=1>北京</el-checkbox> <el-checkbox v-model="checked" @change="aa" :true-label=2>洛阳</el-checkbox> <el-checkbox v-model="checked" @change="aa" :true-label=3>上海</el-checkbox> <el-checkbox v-model="checked" @change="aa" :true-label=4>曹县</el-checkbox> <script> export default { name: "Checkbox", data(){ return{ checked:1 } }, methods:{ aa(){ console.log("选中节点的true-label为："+this.checked) } } } </script>
复选框组的使用
- 适用于多个复选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
<el-checkbox-group v-model="checkList" @change="aa" :max="2"> <el-checkbox :label=1>北京</el-checkbox> <el-checkbox :label=2>洛阳</el-checkbox> <el-checkbox :label=3>上海</el-checkbox> <el-checkbox :label=4>曹县</el-checkbox> </el-checkbox-group> <script> export default { name: "Checkbox", data(){ return{ checkList:[] } }, methods:{ aa(){ console.log("选中节点的true-label为："+this.checkList) } } } </script>
