Vue.js基础-06-绑定样式（v-bind）-03-单项绑定
2022-10-14 本文已影响0人
玄德公笔记
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值没有变化。
image.png
2. 和v-model 比较
- 代码
将上边的 v-bind:class该为v-model：
<input v-model="name">
- 结果显示
image.png
- 输入姓名后
因为v-model是双向绑定，因此name值改变，后边打印的name值也变成了刘备。
image.png
image.png
