07/21-vue单选框页面切换

1 在components里建四个文件分别是:

• 单选框页面 analysis
• 跳转页面是indexcar,indexbdc,indextask

2 在analysis:

• 1 引入刚刚准备的三个文件indexcar,indexbdc,indextask
• 2 在js里定义components里,在里注册文件{indexcar,indexbdc,indextask}
• 3 在自定义标签 indexcar,indexbdc,indextask
• 4 写单选框标签 + v-model="indexstyle" 获取数据绑定
• 5 在自定义标签上判断 indexstyle == 几就跳转相对应的页面

单选框页面

<template>
  <div>
    <indexcar v-if="indexstyle == 1"></indexcar>
    <indexbdc v-if="indexstyle == 2"></indexbdc>
    <indextask v-if="indexstyle == 3"></indextask>
    <div>
  <el-radio-group v-model="indexstyle">
      <el-radio :label="1">备选项1</el-radio>
      <el-radio :label="2">备选项2</el-radio>
      <el-radio :label="3">备选项3</el-radio>
  </el-radio-group>
    </div>
  </div>
</template>

<script>
import indexcar from './indexcart'
import indexbdc from './indexbdc'
import indextask from './indextask'
export default {
  components:{
    indexcar,
    indexbdc,
    indextask
  },
  data () {
    return {
      indexstyle:1
    }
  }
}
</script>

<style lang="less">
  
</style>

其它页面内容分别 111 222 333

<template>
  <div>
    222222222222222
  </div>
</template>
<script>
export default {
  
}
</script>

<style lang="less">
  
</style>

效果图

image.png image.png
image.png