09-v-model使用

最新推荐文章于 2024-04-18 16:58:47 发布

青空95

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量96

点赞数

分类专栏：前端文章标签： vue checkbox

本文链接：https://blog.csdn.net/weixin_41575397/article/details/111826327

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

01-v-model的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="message">
    {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好'
        }
    })
</script>
</body>
</html>

02-v-model的原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  <input type="text" v-model="message">-->
<!--  <input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message = $event.target.value">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data:{
      message:'你好'
    },
    methods:{
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>
</body>
</html>

03-v-model结合radio类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
  <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
    <h2>{{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            sex:'男'
        }
    })
</script>
</body>
</html>

04-v-model结合checkbox类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.checkbox单选框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>
  <h2>你的选择是{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
<!--2.checkbox多选框-->
    <input type="checkbox" value="篮球" v-model="hobbits">篮球
    <input type="checkbox" value="足球" v-model="hobbits">足球
    <input type="checkbox" value="乒乓球" v-model="hobbits">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbits">羽毛球
<h2>你的爱好是{{hobbits}}</h2>
</div>
<label v-for="item in originHobbits" :for="item">
  <input type="checkbox" :value="item" :id="item" v-model="hobbits">{{item}}
</label>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好',
          isAgree:false,
          hobbits:[],
          originHobbits:['篮球','足球','乒乓球','羽毛球','台球','高尔夫球']
        }
    })
</script>
</body>
</html>

05-v-model结合select类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.单选-->
  <select name="a" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="梨子">梨子</option>
    <option value="草莓">草莓</option>
  </select>
  <h2>你选择的水果{{fruit}}</h2>
<!--  2.多选-->
  <select name="b" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="梨子">梨子</option>
    <option value="草莓">草莓</option>
  </select>
  <h2>你选择的水果{{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好',
          fruit:'香蕉',
          fruits:[]
        }
    })
</script>
</body>
</html>

06-v-model修饰符的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.修饰符lazy，失去聚焦或回车后更新-->
  <input type="text" v-model.lazy="message">
   <h2>{{message}}</h2>
<!--  2.修饰符number，直接转为数字类型-->
  <input type="text" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

<!--  3.修饰符trim，去空格-->
  <input type="text" v-model.trim="name">
  <h2>{{name}}</h2>
</div>



<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message:'你好',
          age: 0,
          name:''
        }
    })
</script>
</body>
</html>

青空95

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09-v-model使用

01-v-model的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <input type="text" v-model="message"> {{message}}</d
复制链接

扫一扫