提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue.js：使用v-model创建一组单选按钮

VueJS 创建 按钮 model 单选 一组 使用
2023-09-27 14:22:47 时间

使用v-model创建一组单选按钮

此案例主要是通过v-model将input元素与Vue实例的数据属性绑定，以确定用户选择的是哪个选项。当在浏览器页面显示的时候，任意选择不同的单选按钮，则选择结果分别如下图所示

相关代码的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-model创建一组单选按钮</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <center>
    <div id="app" style="margin: 10px;">
      <p>
        请选择你需要购买的图书：
      </p>
      <p>
        <label for="">
          <input type="radio" name="" id="" v-bind:value = "myBook[0]" v-model = "myName">
          {{myBook[0]}}
        </label>
      </p>
      <p>
        <label for="">
          <input type="radio" name="" id="" v-bind:value = "myBook[1]" v-model = "myName">
          {{myBook[1]}}
        </label>
      </p>
      <p>
        <label for="">
          <input type="radio" name="" id="" v-bind:value = "myBook[2]" v-model = "myName">
          {{myBook[2]}}
        </label>
      </p>
      <p>你所选择的结果如下：</p>
      <h4>{{myName}}</h4>
    </div>
  </center>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myName:'',
        myBook:['前端开发技术实战','jQuery技术实战','c++项目实战开发']
      }
    })
  </script>
</body>
</html>

浏览器的运行效果图

在这里插入图片描述
在这里插入图片描述

相关代码的解释

v-model = "myName"

上面的这段代码表示input元素与Vue实例的数据属性myName进行双向绑定，即表示当input元素的值发生变化的时候，对应的Vue实例的数据属性myName也同步发生变化，反之亦然。

============================

该案例主要是通过v-model进行数据与单选按钮进行双向绑定~~

相关文章