单向绑定
v-bind v-text v-htlm、插值表达式 都属于单向绑定
数据元素发生变化,页面发生变化
页面元素发生变化,数据不变
v-bind:href=“http://…”:简写 :href=“http://…”
插值表达式
只能用在标签体里面,支持vue 变量、函数,表达式
页面刷新过程中会显示原代码 {{name}}、{{age + 1}},不友好
使用方式
<div id="app">
{{name}} {{age + 1}}
<h1>你好 , {{name}} </h1>
</div>
v-bind 给html标签的属性绑定值
动态切换class 、style
<body>
<div id="app">
<a v-bind:href="link">绑定到属性</a>
<span v-bind:class="{'active':isActive,'text-danger':hasError}"
v-bind:style="{color:color,'fontSize':size}">
class增强,控制多个class、style
</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
link: "http://www.baidu.com",
isActive: true,
hasError: true,
color: 'red',
size: '30px'
}
})
</script>
</body>
class 增强语法: {class1:true,class2:false} : true false通过vue函数或者变量来控制,达到动态切换class的需求
class1 class2 名称中含有- 等特殊字符 示例:‘class-name’
style 增强语法: {color:1的值,fontSize:2的值}
双向绑定 v-model
页面元素修改值,绑定数据的值跟着修改
可以修改页面元素的:表单、自定义组件
用于给标签体绑定值