（11）vue.js 指令（3）

泽哥ins

已于 2022-01-31 23:31:16 修改

阅读量254

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-01-25 23:58:01 首次发布

本文链接：https://blog.csdn.net/qq_36213140/article/details/122694085

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、事件处理指令v-on

• 用于进行元素的事件绑定。示例1：

• Vue.js 还为 v-on 指令提供了简写方式。示例2：v-on的简介方式

• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。

• 设置事件处理程序后，可以从参数中接收事件对象。

• 在视图中可以通过 $event 访问事件对象。

• 如果只写了一个参数，没有写$event，那么在视图中该方法不可以通过$event 访问事件对象。

<body>
  <div id="app">
    <p>{{ content }}</p>
    <button v-on:click="content = '这是按钮一的新内容'">第一个按钮</button>
    <button @click="content = '这是按钮二的新内容'">第二个按钮</button>
    <button @click="fn">第三个按钮</button>
    <button @click="fn2(200)">第四个按钮</button>
    <button @click="fn2(200,$event)">第五个按钮</button>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        content: '这是content的默认内容'
      },
      methods: {
        fn(event) {
          console.log(event);
          this.content = '这是按钮三的新内容'
        },
        fn2(value,event) {
          console.log(value,event);
        }
      }
    })
  </script>
</body>

二、表单输入绑定v-model

• 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。我们前面所学习的都是单向数据绑定，单向数据绑定呢，就是数据更新视图，我们的数据一旦发生变化，我们的视图也会随之发生改变，那么我们的双向绑定时什么样的实现顺序呢？双向数据绑定就是我们数据更新视图之后，我们用户再视图当中操作，也会发生视图变化，这个就是视图更新视图。总结：第一步：数据更新视图，第二步：视图更新视图

1.输入框绑定

• 输入框分为单行输入框 input 与多行输入框 textarea。

<body>
  <div id="app">
    <p>这是您输入的信息: {{ value1 }} </p>
    请输入内容:<input type="text" v-model="value1">

    <p>这是您输入的信息: {{ value2 }}</p>
    请输入内容: <textarea v-model="value2"></textarea>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value1: '',
        value2: ''
      }
    })
  </script>
</body>

2.单选按钮绑定

• 单选按钮的双向数据绑定方式如下：

<body>
  <div id="app">
    <p>这是单选框输入的内容: {{ value }} </p>
    <input type="radio" id="one" value="1" v-model="value">单选框一
    <label for="one"></label>
    <input type="radio" id="two" value="2" v-model="value">单选框二
    <label for="two"></label>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value: ''
      }
    })
  </script>
</body>

3.复选框绑定

• 复选框绑定分为单个选项与多个选项两种情况，书写方式不同。

单个选项的情况：结果为2种布尔类型的值，一个是true，一个是false

多个选项的情况：结果是将选中的复选框的value值存入到数组中

注意：单个选项初始定义时要定义成空的字符串，多个选项初始定义时要定义成一个空数组。

<body>
  <div id="app">
    <!-- 单个选项示例 -->
    <p>这是复选框选中的内容: {{ value1 }}</p>
    <input type="checkbox" value="选项内容" id="item" v-model="value1">
    <label for="item">选项内容</label>
    <!-- 多个选项示例 -->
    <p>这是复选框选中的内容: {{ value2 }}</p>
    <input type="checkbox" value="选项一" id="one" v-model="value2">
    <label for="one">选项一</label>
    <input type="checkbox" value="选项二" id="two" v-model="value2">
    <label for="two">选项二</label>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        value1: '',
        value2: []
      }
    })
  </script>
</body>

4.选择框绑定

• 选择框和上面的复选框一样，绑定分为单选绑定与多选绑定两种情况，书写方式不同。

单个选项的情况：结果为2种布尔类型的值，一个是true，一个是false

多个选项的情况：结果是将选中的复选框的value值存入到数组中

注意：单个选项初始定义时要定义成空的字符串，多个选项初始定义时要定义成一个空数组。

复选选择需要再select标签上添加multiple属性才可以实现效果。然后我们选中多个选项时需要按住键盘的ctrl键+鼠标左键进行点击选择，取消选择再次选中键盘ctrl+鼠标左键点击取消选择即可。

5.v-model 指令小结

• input 输入框：绑定字符串值。
• textarea 输入框：绑定字符串值。
• radio：绑定字符串值。
• checkbox：单个绑定布尔值，多个绑定数组。
• select：单选绑定字符串，多选绑定数组。

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（11）vue.js 指令（3）

一、事件处理指令v-on• 用于进行元素的事件绑定。示例1：• Vue.js 还为 v-on 指令提供了简写方式。示例2：v-on的简介方式• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序。• 设置事件处理程序后，可以从参数中接收事件对象。• 在视图中可以通过 $event 访问事件对象。• 如果只写了一个参数，没有写$event，那么在视图中该方法不可以通过$event 访问事件对象。<body> <div id="a
复制链接

扫一扫