vue双向绑定失败原因

最新推荐文章于 2025-03-06 15:44:00 发布

fjxnbeg

最新推荐文章于 2025-03-06 15:44:00 发布

阅读量324

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_73769653/article/details/141034244

版权

初学者。。。

vue真的好多坑

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
      <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
      {{message}}
  </div>
      性别：
      <input type="radio" name="sex" value="男" v-model="qinjiang">男
      <input type="radio" name="sex" value="女" v-model="qinjiang">女
      <p>
          选中了谁：{{qinjiang}}
      </p>
      下拉框：
      <select v-model="selected">
          <option>---请选择---</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
      </select>
      <span>value:{{selected}}</span>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "123",
            qinjiang: '男',
            selected: 'B'
        }
    });
  </script>
</body>
</html>

刚开始是这样的，我定义了一个vm对象，绑定了id为app的模块，在单选框和复选框的部分我想实现双向绑定，但是失败了。。。

我大概翻了一下官网，，，没咋看懂。。。

于是问了chatgpt：

。。。

第一条就是我的问题，没有把select标签写进div容器里面，我修改后就可以了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
      <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
      {{message}}
      性别：
      <input type="radio" name="sex" value="男" v-model="qinjiang">男
      <input type="radio" name="sex" value="女" v-model="qinjiang">女
      <p>
          选中了谁：{{qinjiang}}
      </p>
      下拉框：
      <select v-model="selected">
          <option>---请选择---</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
      </select>
      <span>value:{{selected}}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    var vm = new Vue({
        el: "#app",
        data:{
            message: "123",
            qinjiang: '男',
            selected: 'B'
        }
    });
  </script>
</body>
</html>

另外，还有一个我之前遇到的问题，就是写进去了也绑定不了的，那么可能是你的cdn出问题了，你可以去官网找一个cdn复制上去，重新导入一个vue.js文件