Vue.js基础-06-绑定样式（v-bind）-03-单项绑定数据（v-bind:value）

文章目录

1. 单项绑定（v-bind:value）
- 语法示例
- 完整示例
2. 和v-model 比较
- 在这里插入图片描述

1. 单项绑定（v-bind:value）

语法示例

vue实例中定义值

     new Vue({
      el: '#app',
      data: {
        要绑定的键: '要绑定的值',
      }
    })

绑定该值

  <input v-bind:value="要绑定的键">

完整示例

 <!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      border-style: dotted;
      padding: 25px;
    }
  </style>
</head>
 
<body>
  <div id="app" v-bind:class="{ 'active': true }">
    <p>input 元素：</p>
    <input v-bind:value="name">
    <p> {{ name }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: '请输入姓名',
      }
    })
  </script>
</body>
 
</html>

结果显示

输入框中绑定了name值，因此输入框内打印出了name值。后边同样打印出name值。

在这里插入图片描述

输入一个姓名

输入一个姓名后，因为是单项绑定，因此后边打印name值没有变化。

在这里插入图片描述

2. 和v-model 比较

代码

将上边的 v-bind:class该为v-model：

 <input v-model="name">

结果显示
输入姓名后

因为v-model是双向绑定，因此name值改变，后边打印的name值也变成了刘备。

posted on 2022-06-02 12:49 运维开发玄德公阅读(22) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue.js基础-06-绑定样式（v-bind）-02-绑定内联样式（v-bind:style）

· Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

· vue入门系列-数据绑定(2)

· 单项绑定 v-bind

· Vue学习笔记6--数据绑定

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

Vue.js基础-06-绑定样式（v-bind）-03-单项绑定数据（v-bind:value）

文章目录

1. 单项绑定（v-bind:value）

语法示例

完整示例

2. 和v-model 比较

导航

统计

合集

	new Vue({
	el: '#app',
	data: {
	要绑定的键: '要绑定的值',
	}
	})

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>CROW-宋</title>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	<style>
	.active {
	border-style: dotted;
	padding: 25px;
	}
	</style>
	</head>

	<body>
	<div id="app" v-bind:class="{ 'active': true }">
	<p>input 元素：</p>
	<input v-bind:value="name">
	<p> {{ name }}</p>
	</div>
	<script>
	new Vue({
	el: '#app',
	data: {
	name: '请输入姓名',
	}
	})
	</script>
	</body>

	</html>

Vue.js基础-06-绑定样式（v-bind）-03-单项绑定数据（v-bind:value）

文章目录

1. 单项绑定 （v-bind:value）

语法示例

完整示例

2. 和v-model 比较

导航

统计

合集

1. 单项绑定（v-bind:value）