Vue插值指令4

最新推荐文章于 2023-04-11 23:03:52 发布

m0_44974944

最新推荐文章于 2023-04-11 23:03:52 发布

阅读量177

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_44974944/article/details/108790370

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue插值指令4

1.v-model

v-model指令的作用是便捷设置和获取表单元素的值。绑定数据<<------->>修改表单（双向数据绑定）

  <body>
      <div id="app">
          <input type="text" v-model="message">
          <h2>{{message}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
          let app = new Vue({
              el:"#app",
              data:{
                  message:'海燕'
              },
          })
      </script>
  </body>

在这里插入图片描述

v-model原理：1.v-bind绑定一个value属 2.v-on指令给当前元素绑定input事件。

  <body>
      <div id="app">
          <!-- 1.v-bind绑定一个value属性
  		2.v-on指令给当前元素绑定input事件 -->
          <input type="text" :value="message" @input="valueChange">
          <h2>{{message}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
          let app = new Vue({
              el:"#app",
              data:{
                  message:'海燕！',
              },
              methods:{
                  valueChange(){
                      //event页面事件的改变
                      this.message = event.target.value;
                  }
              },
          })
      </script>
  </body>

在这里插入图片描述

v-model与redio的使用。

<body>
    <div id="app">
        <!-- 使用name相同名字让它们互斥 也可以使用v-model使得它们互斥 -->
        <label for="male">
            <input type="radio" id="male" name="sex" value='男' v-model="sex">男
        </label>
        <label for="fmale">
            <input type="radio" id="fmale" name="sex" value='女' v-model="sex">女
        </label>
        <h2>{{sex}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                //可以让它有默认值
                sex:"男"
            },
        })
    </script>
</body>

在这里插入图片描述

v-model和checkbox的使用。

<body>
    <div id="app">
        <!-- 1.单选框 -->
        <label for="agree">
            <input type="checkbox" value="同意" id="agree" v-model="isAgree">同意
        </label>
        <button :disabled="!isAgree">下一步</button>

        <!-- 2.复选框 -->
        <hr>
        <input type="checkbox" value="足球" v-model="hobbis">足球
        <input type="checkbox" value="羽毛球" v-model="hobbis">羽毛球
        <input type="checkbox" value="乒乓球" v-model="hobbis">乒乓球
        <input type="checkbox" value="篮球" v-model="hobbis">篮球

        <h2>宁的选择是:{{hobbis}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                isAgree:false,
                hobbis:[]
            },
        })
    </script>
</body>

在这里插入图片描述

v-model修饰符

  <body>
      <div id="app">
          <!-- 1.lazy修饰符 -->
          <!-- 可以让数据在失去焦点或回车时才更新 -->
          <input type="text" v-model.lazy="message">
          <h2>{{message}}</h2>

          <!-- 2.number修饰符 -->
          <!-- 可以让在输入框中输入的内容自动转成数字类型 -->
          <input type="number" v-model.number="num">
          <h2>{{typeof num}}</h2>

          <!-- 3.trim修饰符 -->
          <!-- 可以过滤内容左右两边的空格 -->
          <input type="text" v-model.trim="some">
          <h2>输入的是{{some}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
          let app = new Vue({
              el:"#app",
              data:{
                  message:'海燕！',
                  num:9,
                  some:''
              },
          })
      </script>
  </body>

在这里插入图片描述

v-model与select

  <body>
      <div id="app">
          <!-- 1.单选 -->
          <select name="abc" v-model="fiurt">
              <option value="香蕉">香蕉</option>
              <option value="苹果">苹果</option>
              <option value="葡萄">葡萄</option>
              <option value="李子">李子</option>
          </select>
          <h2>{{fiurt}}</h2>
          <hr>
          <!-- 2.多选 -->
          <select name="abc" v-model="fiurts" multiple>
              <option value="香蕉">香蕉</option>
              <option value="苹果">苹果</option>
              <option value="葡萄">葡萄</option>
              <option value="李子">李子</option>
          </select>
          <h2>{{fiurts}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
          let app = new Vue({
              el:"#app",
              data:{
                  //设置默认值
                  fiurt:'李子',
                  fiurts:[]
              },
          })
      </script>
  </body>

在这里插入图片描述

m0_44974944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插值指令4

Vue插值指令41.v-model v-model指令的作用是便捷设置和获取表单元素的值。绑定数据<<------->>修改表单（双向数据绑定） <body> <div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2> </div> &lt
复制链接

扫一扫