v-model（Vue）

1、v-model基本使用方法和原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <div id="app">

    <!-- 使用： v-model实现数据的双向绑定 修改input的value data数据会同时变化 反之亦然  -->
    <label for="text1">
      信息1：
      <input type="text" name="text1" id='text1' v-model="message1" />
    </label>
    <h2>{{message1}}</h2>


    <!--  原理: -->
    <!--  同时使用2个vue指令 v-bind:value 和 v-on:input -->
    <label for="text2">
      信息2：
      <input type="text" name="text2" id="text2" v-bind:value="message2" v-on:input="inputHandler">
    </label>
    <h2>{{message2}}</h2>
  </div>


<script src="../../vue.js"></script>
<script>

  const app = new Vue({
    el:'#app',
    data(){
      return {
        message1:'hello world',
        message2:'hello world'
      }
    },
    methods:{
      inputHandler(event){
        this.message2 = event.target.value;
      }
    }
  })
</script>
</body>
</html>
View Code

2.v-model结合radio类型使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <input type="radio" value="male" v-model="gender">男
  <input type="radio" value="fomale" v-model="gender">女
  <br>
  {{gender}}

</div>

<script src="../../vue.js"></script>
<script>

  const app = new Vue({
    el:'#app',
    data(){
      return {
        gender:'fomale'
      }
    }
  })
</script>
</body>
</html>
View Code

 

posted @ 2020-02-22 01:06  老程序猿er  阅读(205)  评论(0)    收藏  举报