第一节Vue官网学习(模板语法:一、{{}}双大括号语法)我们说到了双大括号语法,他会随着Vue示例中data属性下面的属性名称的值改变而改变,有时候我们也需要一些属性随着业务或者操作而改变。
比如disabled属性,readonly属性,src属性,href属性,
双大括号语法只能作用在html标签内部,像这种属性的是无法生效的,那么v-bind指令就专门针对这种属性的绑定而生。
v-bind:disabled=“btnIsDisabled”
v-bind:readonly="inputIsReadonly"
下面以一个例子来说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
</head>
<body>
<div id="app">
<button v-bind:disabled="btnIsDisabled">我是可用按钮</button>
<input type="text" v-bind:readonly="inputIsReadonly">
<button @click="changeAttr">禁用/启用按钮和输入框</button>
</div>
</body>
<script src="../static/js/Vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
btnIsDisabled: false,
inputIsReadonly: false,
},
methods: {
changeAttr(){
this.btnIsDisabled = !this.btnIsDisabled
this.inputIsReadonly = !this.inputIsReadonly
}
}
})
</script>
</html>
看到的效果就是:
点击按钮之后:
这样就动态绑定属性并且重新渲染了,声明式编程就是爽