[JavaScript知识库] Vue学习笔记：基础语法（三）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习笔记：基础语法（三） -> 正文阅读

[JavaScript知识库]Vue学习笔记：基础语法（三）

一、v-model表单绑定

v-model作用：实现表单元素和数据的双向绑定，即表单元素的值改变会导致Vue对象的数据改变，反之亦然。

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
        data:{
          message:"hello你好"
        }

      })
    }
  </script>

</head>
<body>

<div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
</div>

</div>

</body>

v-model原理：实际上是v-bind绑定了表单的value属性，然后v-on给当前元素绑定了input指令

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
        data:{
          message:"hello你好",
        },
        methods:{
          fun(event){
            this.message = event.target.value
          }
        }

      })
    }
  </script>

</head>
<body>

<div id="app">
    <input type="text" :value="message" @input="fun">
    <h2>{{message}}</h2>
</div>

</div>

</body>
</html>

v-model结合radio使用

radio结合v-model使用时候，不写name属性的时候也会变成单选框

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
        data:{
          sex:""
        },
      })
    }
  </script>

</head>
<body>

<div id="app">
  <label for="male">
    <input type="radio" value="男" v-model="sex" id="male">男
  </label>
  <label for="female">
    <input type="radio" value="女" v-model="sex" id="female">女
  </label>

  <h2>{{sex}}</h2>

</div>

</div>

</body>
</html>

v-model结合checkbox使用

v-model结合单个checkbox使用时候，数据是true和false，v-model结合多个checkbox的时候，数据应该是一个数组

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/js/vue.js"></script>

  <script>
    window.onload=function () {
      let app = new Vue({
        el: "#app",
        data:{
          sports:[]
        },
      })
    }
  </script>

</head>
<body>

<div id="app">
  <label for="basketball">
    <input type="checkbox" value="篮球" v-model="sports" id="basketball">篮球
  </label>
  <label for="football">
    <input type="checkbox" value="足球" v-model="sports" id="football">足球
  </label>
  <label for="badminton">
    <input type="checkbox" value="羽毛球" v-model="sports" id="badminton">羽毛球
  </label>

  <h2>{{sports}}</h2>

</div>

</div>

</body>
</html>