Vue学习笔记：基础语法（三）

最新推荐文章于 2024-09-06 23:21:51 发布

hejianghaoswu

最新推荐文章于 2024-09-06 23:21:51 发布

阅读量80

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/hejianghaoswu/article/details/119008243

版权

一、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>