vue的v-bind和v-model

这是vue的基础知识，关于v-bind和v-model的。

v-bind指令

概念和使用

为了将html中的属性和js中变量动态绑定，比如图片的src属性，我们给绑定到js中的imgSrc这一变量中，就可以在使用的时候，随作者的意思来进行图片更换而不用调整html了，如下：

<template>
    <div>
        <!-- 下面两者效果等同 -->
        <img :src="imgSrc" alt="">
        <img v-bind:src="imgSrc" alt="">
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const images = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
]

const imgSrc = ref(images[0])

onMounted(() => {
    setInterval( ()=> {
        // 随机进行图片切换
        imgSrc.value = images[Math.floor(Math.random() * images.length)]
    }, 3000)
})
</script>

如上就是一个v-bind的使用，将img的src属性和imgSrc变量进行绑定，并且利用setInterval定时函数来进行随机切换，这就是js的一个动态应用，而上面的第二种表达就是v-bind的简写。

v-bind进行雷鸣和样式的动态绑定

前面的使用，让js变量可以很方便地在html属性中进行调用，那么如果想要在html属性中引入更复杂的调用呢？如下：

<template>
   <div :class="{active: areYouOk}"></div>
   <div :class="{active: iamNotOk}"></div>
</template>

<script setup>
import { ref } from 'vue'

const areYouOk = ref(true)
const iamNotOk = ref(false)
</script>

如上应用，只有当js变量areYouOk或者iamNotOk为true，对应的div才会赋予active的类名。除此以外，还有着三元运算符来来进行条件判断的使用。比如对于有着type属性的一个html标签，不同的type属性有着不同的效果，所以要对type进行选择，如下：

<template>
   <component :type=" state === 'login' ? 'danger' : 'success'" />
</template>

<script setup>
import { ref } from 'vue'

const state = ref('login')
</script>

如上，在type属性中进行条件判断，当前状态为login，那么这个component的type属性就是danger，否则就是success。

v-model指令

概念和使用

v-model常常是针对表单提交的数据，把表单中的关键数据和js变量进行绑定，方便更新vue实例中的变量数据，相对的，vue实例中变量进行变化，对应表单也会对应变化。

<template>
 <input v-model="message" placeholder="请输入内容">
 <p>你输入的内容是：{{ message }}</p>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('');
</script>

当然，最常见的还是form表单中进行绑定，这样对应在submit的时候，vue实例可以方便进行表单提交，对后台发起对应请求。

应用修饰符

v-model有着修饰符，可以对数据进行特别处理：

1. lazy修饰符：

<template>
 <input v-model.lazy="message" placeholder="请输入内容">
 <p>你输入的内容是：{{ message }}</p>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('');
</script>

默认情况下，input标签会在输入时间触发就更新message数据，但在添加lazy以后，就只会在change事件触发才会更改message，这样也省得来回更新。

2. number修饰符

<template>
 <input v-model.number="age" placeholder="请输入年龄">
 <p>输入的年龄是：{{ age }}</p>
</template>
<script setup>
import { ref } from 'vue';
const age = ref(0);
</script>

如上应用，本来input输入数据后，会触发修改age的值为对应的数字字符串，添加number修饰，则是更改age的值为实际的数字而不是数字字符串

3. trim修饰符：自动去除两端空格

总结

v-bind是单向数据绑定，主要是为了将js数据给绑定到html元素属性上，js数据变化，从而影响标签的表现；而v-model是双向的绑定，一方变化另一方跟着变化。

实际上，v-model算是v-bind和v-on的语法糖，在自定义组件中，可通过v-bind进行数据比昂定，还可以通过emit触发自定义事件模拟v-model的双向绑定效果，如下：

<input type="text" v-model="value">

<input type="text" :value="value" @input="value = $event.target.value">

<input type="text" v-bind:value="value" v-on:input="value = $event.target.value">