当前位置：网站首页>7.常用指令（下）v-on，v-bind，v-model的常见操作

7.常用指令（下）v-on，v-bind，v-model的常见操作

2022-06-25 22:06:00 【彼岸的饭碗】

v-on

v-on的作用是给元素添加事件监听。可以简写为@

我们学习的JavaScript的元素的事件监听都可以在VUE中使用

原生的JavaScript事件监听

事件名称	方法
点击	onclick
双击	ondbclick
鼠标移上	onmouseenter
鼠标离开	onmouseleave
鼠标滑过	onmousemove
鼠标移除	onmouseout
失去焦点	onblur
聚焦	onfocus
键盘事件	onkeydown

上表的方法都是原生的JavaScript的事件方法，在vue中的使用一律是去除on,然后添加v-on，或者@符号

比如单击

<button @click="add">点我加一</button>
<button v-on:click="minus">点我减一</button>

需要注意的是所有的方法都必须写在vue的methods中，不允许在外部罗列方法名称

methods:{
                add(){
                    this.a++
                    console.log(this.a)
                },
                minus(){
                    this.a--
                    console.log(this.a)
                }
         }

值得注意的是，原生的Javascript的事件方法不能与VUE混用

<button onclick="add">点 我加一</button>

在这里插入图片描述同名方法会有覆盖情况，后写方法会覆盖先写的方法

            methods:{
                add(){
                    this.a++
                    console.log(this.a)
                },
                add(){
                    this.a+=2
                },
                add(){
                    this.a+=4

                },
                //上面两个add方法会被覆盖掉
                minus(){
                    this.a--
                    console.log(this.a)
                }
            }

上面代码中，最后实现的效果是每次+4

此外，方法中可以传入参数

<button v-on:click="add(5)">点我加一</button>


methods:{
                add(num){
                    this.a+=num

                },
        }

在这里插入图片描述如果方法中没有传入值，默认输入会有该方法的事件参数

<button v-on:click="add">点我加一</button>

methods:{
                add(num){
                    console.log(num)
                },
        }

在这里插入图片描述

v-bind

v-bind属性的作用是将普通的w3c属性变为动态属性，让属性具有动态能力

使用动态属性之前

<img src="img/'+url+'.ico" alt="">

在这里插入图片描述
上面的图片是加载不出来的，因为如果没有使用动态属性，会将编译之前的属性参数直接抛出

此时使用v-bind

<img v-bind:src="'img/'+url+'.ico'" alt="">
<!--等同于下方代码-->
<img :src="'img/'+url+'.ico'" alt="">

此时vue会编译带有v-bind的属性，返回编译后的结果
在这里插入图片描述
我们可以使用动态属性实现class类名的动态效果


    <style> p{
      width: 200px; height: 200px; background-color: khaki; } .red{
      background-color: red; } .pin{
      background-color: pink; } </style>

<!--结构代码，上面是样式-->

<body>
    <div id="app">
       <p :class="{red:url <=1,pin:url==10}">
           {
   {url}}
       </p>
       <button v-on:click="add">点我加一</button>
       <button v-on:click="minus">点我-一</button>
    </div>
    <script src="vue.js"></script>
    <script> var vue=new Vue({
      el:"#app", data:{
      url:0 }, methods:{
      add(num){
      this.url++ }, minus(){
      this.url-- } } }) </script>
</body>

需要注意的是动态class必须要使用{}去包裹，值可以有多个，值得参数是一个布尔值。

在这里插入图片描述除了class属性可以实现动态外，style属性可有对应得功能

style属性和class属性有特殊性，如果需要使用动态传值，必须传入一个object对象

<p :style="{
       width:b+'px'}">
           {
   {url}}
</p>

v-model

v-model属性是使用在表单元素中得，作用是实现表单和数据的双向绑定

姓名:<input type="text v-model="val>

vue是mvvm框架，vue 的核心之一就是双向数据绑定

案例如下

<m>
   姓名:<input type="text" v-model="val">
   {
   {val}}
</m>

数据中心内容：

var vue=new Vue({
            el:"#app",
            data:{
                val:'姓名是张三'
            },
})

此时如果用户在输入框中改变了内容
在这里插入图片描述小练习：

主体：

<div id="app">
        <h2>调查问卷</h2>
       <m>
           姓名:<input type="text" v-model="name">
       </m>
       <br>
       <br>
       <m>
        性别:
           <input type="radio" v-model="sex" value='男'> 男
           <input type="radio" v-model="sex" value="女"> 女
       </m>
       <br>
       <br>
       <m>
        爱好:
            <input type="checkbox" name="hobby" value="打篮球" v-model="hobby"> 打篮球
            <input type="checkbox" name="hobby" value="跳舞" v-model="hobby"> 跳舞
            <input type="checkbox" name="hobby" value="读书" v-model="hobby"> 读书
       </m>
       <br>
       <br>
       <c>
            籍贯:
            <select name="native" id="" v-model="native">
                <option value="河南">河南</option>
                <option value="山东">山东</option>
                <option value="陕西">陕西</option>
                <option value="湖南">湖南</option>
                <option value="湖北">湖北</option>

            </select>
        </c>
        <p>
            您填写的表单的内容是: 姓名：{
   {name}} , 性别:{
   {sex}}， 籍贯:{
   {native}}，爱好:{
   {hobby}}
        </p>
        <button @click="submit">
                 点我提交
        </button>
    </div>

数据中心：

data:{
                name:'',
                sex:'男',
                hobby:[],
                native:'河北'
     },

方法：

 methods:{
                submit(){
                    let obj={
                        name:this.name,
                        sex:this.sex,
                        hobby:this.hobby,
                        native:this.native
                    }
                    console.log(obj)
                }
         }

结果：
在这里插入图片描述