关于vue如何动态渲染单选框（radio）同时动态渲染页面

关于vue如何动态渲染单选框（radio）同时动态渲染页面

自己做的一个练习，这里记录一下。
首先是template部分

<template>
  <div class="hello">
    <div v-for="item in msg" :key='item'>//首先循环渲染列表
      <input type="radio" :id="item.id" :value="item" v-model="ck"><label :for="item.id">{{ item.name }}</label>
      //这里是同时使用了v-model和v-bind：value，实现数据的绑定和单项选择
    </div>
    //这里是根据单选框动态渲染列表内容
      <p >{{ ck.id }}</p>
      <p >{{ ck.name }}</p>
      <p >{{ ck.title }}</p>
  </div>
</template>

之后是js部分，仅仅只是数据而已

<script>
export default {
  name: 'Radio',
  data(){
    return{
      msg:{
        hw:{
          id:'hw',
          name:'华为',
          title:'这是第一个列表'
        },
        ry:{
          id:'ry',
          name:'荣耀',
          title:'这是第二个列表'
        }
      },
     ck:{
          id:'hw',
          name:'华为',
          title:'这是第一个'
        }
    }
  },
 
}
</script>