v-bind和v-model指令

Penroseblog

已于 2022-04-12 15:43:05 修改

阅读量1.7k

点赞数 2

分类专栏：学习笔记文章标签： vue.js javascript 前端

于 2022-02-07 22:27:51 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44875230/article/details/122815762

版权

学习笔记专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Vue.js中的v-bind和v-model指令。v-bind用于单向数据绑定，常见于不可修改标签，其简写形式为:，使得标签属性能够根据data属性的值动态更新。v-model则是用于实现双向数据绑定，主要用于表单元素，如input和select，它允许用户输入的内容直接反映在Vue实例的数据中，并同步更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- v-bind指令
- v-model指令

v-bind指令

简写：v-bind常简写为:
简称：单向数据绑定
作用：将双引号里的字符串解析成js表达式执行
使用对象：多应用在除表单元素外的不可修改标签中(标签的属性和标签体的内容在页面中不可以被更改)
代码示例一

<script type="text/javascript">
        //去除浏览器中的生产提示
            Vue.config.productionTip = false;
            new Vue({
                el:"#root",
                data:{
                    url:"https://www.baidu.com"
                }
            })
</script>

<div id="root">
			<h2>{{name}}</h2>
			<!-- 没有进行数据绑定 -->
			<a href="url">百度</a>
			<!-- 单向数据绑定 -->
			<!-- 缩写 -->
			<a :href="url">百度</a>
</div>

标签属性中的内容进行单向数据绑定后，里面的字符串会被当成js表达式执行。下图展示了不使用和使用v-bind指令后页面中的标签内容。

在这里插入图片描述

注：单向数据绑定的意思是我们只有通过修改data配置属性中的值才能够改变页面中的值，而当我们去修改页面中的值则不会引起vue开发者工具中data属性值的变化。它们之间存在着单向联系。

在这里插入图片描述

代码示例二

<!--Student组件-->
<template>
  <div>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ age+1 }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student", 
  props:['name','sex','age']
};
</script>


<!--App组件-->
<template>
  <div>
    <!-- 如果age属性不加v-bind，则传的数据是字符串类型的
    加了:,引号中的内容就是js表达式执行的结果 ，此时接收的就是Number类型的数据-->
    <Student name="李四" sex="male" :age="18"/>
  </div>
</template>

<script>
import Student from './components/Student.vue';
export default {
  name: "App",
  components: {
    Student,
  },

};
</script>

v-model指令

简写：v-model:value简写为v-model，因为v-model默认收集的就是value值
简称：双向数据绑定
作用：实现数据的双向绑定，修改表单中的值即可修改data配置项中的值。即页面上的改变映射Vue控制台中的数据变化。
使用对象：表单元素(如input标签、select标签)，因为只有是表单元素用户才可以输入内容，通过input标签中的value属性与用户进行交互

代码示例

<body>
		
		<div id="root">
			<input type="text" v-model="name">
		</div>
		
		
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					name:"Penrose",
				}
			})
		</script>
	</body>