v-bind和v-model的区别

news/2024/4/25 18:10:47/文章来源:https://blog.csdn.net/m0_45884629/article/details/131793448

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>V-bind的详解</title>
</head><body><!-- v-bind指令HTML标签某个属性的值进行动态绑定效果原理 编译前:<HTML标签 v-bind:参数="表达式"></HTML标签>编译后:<HTML标签 参数="表达式的执行结果"></HTML标签>在编译的时候v-bind后面的"参数名"会被编译为HTML标签的"属性名"表达式会关联data，当data发生改变之后，表达式的执行结果就会发生变化常用于动态绑定class类型，或者一些组件库中的属性绑定可以简写为:  v-bind:class="xxx" 等价于:class="xxx"图--><!-- v-bind指令动态数据绑定可以用于HTML的任何标签data ===>视图只能通过data数据去改变视简写 v-bind:参数="xxx" 等价于:参数="xxx"v-model指令双向数据绑定只能用于表单类元素 input select textareadata <====>视图 视图改变修改data，data改变修改视图简写 v-model:value="xxx" 等价于 v-model="xxx"--><div id="app">v-bind: <input type="text" name="" id="" :value="name">v-model: <input type="text" name="" id="" v-model="name"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>new Vue({el: '#app',data() {return {}},mounted() {},methods: {}})
</script></html>