Vue的基础知识之绑定操作

最新推荐文章于 2025-10-12 22:38:28 发布

原创最新推荐文章于 2025-10-12 22:38:28 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

本文详细介绍了Vue.js中v-bind的使用，包括动态绑定属性、class和style，以及属性绑定的小结案例。接着，讨论了v-model的原理和在表单元素（如radio、checkbox、select）中的应用。最后，提到了v-model的修饰符，如lazy、number和trim，用于优化数据更新和格式化。

绑定属性、

v-bind(语法糖的写法就是一个冒号：）:动态的绑定属性，例如<img v-bind src='baidu.com'>，可以写成<img :src="属性名字">,这里v-bind动态的绑定了src的属性

v-bind绑定class（有两种方法）：

①：对象语法

<div id="app">
<h2 :class="{active:isActive}">{{name}}</h2>
  <h2 :class="getClasses()">{{name}}</h2>
<button @click="btnClick">颜色反转</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data: {
            name: '你好啊',
            isActive: true,
            // isLine: true
        },
        methods:{
            btnClick:function (){
                this.isActive=!this.isActive
            },
            getClasses:function (){
                return {active: this.isActive}
            }
        }
    })
</script>

用法一：直接通过{}绑定一个类 <h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值 <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突注：如果isActive和isLine都为true，那么会有title/active/line三个类 <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中注：classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>

②：数组语法：对象语法的含义是:class后面跟的是一个对象

用法一：直接通过{}绑定一个类

用法二：也可以传入多个值 <h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突

注：会有title/active/line三个类 <h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中注：classes是一个计算属性 <h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style：我们可以利用v-bind:style来绑定一些CSS内联样式

①：对象语法

<div id="app">
<h2 :style="{fontSize:finalSize + 'px',fontColor:finalColor}">{{message}}</h2>
</div>

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

<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            finalSize:100,
            finalColor:'red',
        }
    })

:style="{color: currentColor, fontSize: fontSize + 'px'}" style后面跟的是一个对象类型

对象的key是CSS属性名称对象的value是具体赋的值，值可以来自于data中的属性

②数组语法

  <div id="app">
  <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
      const app=new Vue({
          el:'#app',
          data:{
              message:'你好啊',
              baseStyle:{backgroundColor:'red'},
              baseStyle1:{fontSize:'100px'}
          }
      })
  </script>

<div v-bind:style="[baseStyles, overridingStyles]"></div>

style后面跟的是一个数组类型多个值以，分割即可

绑定属性的小结案例：

需求：输出一个电影数组，要求页面的第一个电影名为active样式，当点击电影名时，对应电影名样式变为active

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <button v-for="(item,index) in movies"
        @click="currentIndex=index"
        :class="{active: currentIndex == index}">
      {{item}}
    </button>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            movies:['战狼','战狼2','海贼王','怒火'],
            currentIndex:0
        },
        methods:{

        }
    })
</script>
</body>
</html>

首先先遍历数组打印出电影名，然后给定一个currentIndex值（初始值为0），当currentIndex值等于数组下标index时，active被应用。不等时，不应用。而鼠标监听事件就是将currentIndex值改为鼠标所点击的电影名的下标值

（三）、1、计算属性的介绍及应用

在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}

我们发现计算属性是写在实例的computed选项中的

计算属性中也可以进行一些更加复杂的操作，比如下面的例子：

<div id="app">

  <h2>总价格:{{totalPrice}}</h2>
  <h2>总价格:{{totalPrice1}}</h2>
  <h2>总价格:{{totalPrice2}}</h2>

</div>

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

<script>
    const app=new Vue({
        el:'#app',
        data:{
            books: [
                {id:110,name:'编程技术',price:119},
                {id:111,name:'深入理解计算机原理',price:129},
                {id:112,name:'维基百科',price:139},
                {id:113,name:'现代操作系统',price:88},
            ]
        },
        computed:{
            totalPrice : function () {
                let result = 0
                for (let i=0 ; i < this.books.length; i++) {
                    result += this.books[i].price
                }
                return result

            },
            totalPrice1:function (){
                let sum = 0
                for (let i in this.books){
                    sum+=this.books[i].price
                }return sum
            },
            totalPrice2:function (){
                let m = 0
                for (let book of this.books){
                    m += book.price
                }return m
            }
        }
    })
</script>

在computed中写了三个属性方法（for循环语法不同），都计算出来了书本总价格，并在div块中进行显示操作

2、计算属性的setter和getter

每个计算属性都包含一个getter和一个setter 在上面的例子中，我们只是使用getter来读取。在某些情况下，你也可以提供一个setter方法（不常用）。

computed: {
            // fullName: function () {
            //   return this.firstName + ' ' + this.lastName
            // }
            // name: 'coderwhy'
            // 计算属性一般是没有set方法, 只读属性.
            fullName: {
                set: function(newValue) {
                    // console.log('-----', newValue);
                    const names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                },
                get: function () {
                    return this.firstName + ' ' + this.lastName
                }
            },

表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。

当我们在输入框输入内容时因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。所以，通过v-model实现了双向的绑定。

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

双向绑定含义：在输入框中改变输入值可以改变我们data中的message，改变我们的message的时候也可以改变我们输入框中的值

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件也就是说下面的代码：

等同于下面的代码：

<input type="text" v-model="message">
//等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model结合radio、checkbox和select的使用

一、当我们的有两个input，且input标签为radio时，我们可以用v-model绑定data中的某一个值，如果绑定的是同一个值，那么我们的两个radio就可以互斥

  <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>


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

上述代码我们在两个input中都用v-model绑定了data中的sex值，使得他们的sex值互斥，radio选择就是互斥

二、当我们的input标签是个checkbox时，我们也可以使用v-model绑定对象值进行选中

 <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
    <button :disabled="!isAgree">下一步</button>


 data:{
            message:'你好啊',
            isAgree:false,}

上述代码可知，我们也是在input标签内写了v-model，使得v-model绑定data中的isAgree属性，当我们点击checkbox按钮时，我们isAgree的boolean值就会变为True，再点击就会变为false。只有当我们的isAgree值为true时，我们下面的“下一步”按钮才会可用

而我们如果需要多选，我们只需要在input标签内多写一个multiple属性即可

 <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree" multiple>同意协议
    <button :disabled="!isAgree">下一步</button>


 data:{
            message:'你好啊',
            isAgree:false,}

三、当我们使用select标签时，我们也可以使用v-model绑定对象值进行选中

  <select name="abc" id="" v-model="fruit">
    <option value="香蕉">香蕉</option>
    <option value="苹果">苹果</option>
    <option value="梨子">梨子</option>
    <option value="榴莲">榴莲</option>
    <option value="西瓜">西瓜</option>

  </select>
  <h2>您选择的水果是:{{fruit}}</h2>


<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            fruit:'榴莲',
        }
    })
</script>

在上述代码段中我们可以知道，我们在select标签中也写入了v-model，并且与data中的fruit进行双向绑定，而fruit初始值为榴莲，那么我们的select标签默认选中榴莲，随后我们点击哪一项水果便可以将data中的fruit值更改并选择，多选的话也是一样在标签内多写一个multiple即可，此时我们的用户只需要CTRL＋鼠标点击即可选中多个事件

值绑定

初看Vue官方值绑定的时候，我很疑惑，但是仔细阅读之后，发现很简单，就是动态的给value赋值而已：

我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。

但是真实开发中，这些input的值可能是从网络获取或定义在data中的。

所以我们可以通过v-bind:value动态的给value绑定值。



  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 单选框
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
</script>

从上述代码段中我们可以得知：我们在data中预先定义了一个originHobbies，随后我们定义一个label标签，并在label标签中用for循环遍历我们的originHobbies得到我们的爱好选项，并显示在下面的input标签中，而我们的input标签中的value值、id、及label中for属性则都是label标签中for循环遍历出来的item，由此实现我们的双向绑定

v-model的修饰符的使用

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新

  <input type="text" v-model="message">
  <h2>{{message}}</h2>

  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输入框中输入的内容自动转成数字类型：

  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格

  <input type="text" v-model="name">
  <h2>您输入的名字是：{{name}}</h2>
  <input type="text" v-model.trim="name1">
  <h2>您输入的名字是：{{name1}}</h2>

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