Vue官网学习（模板语法：三、v-bind指令）

最新推荐文章于 2023-09-13 17:52:39 发布

CoderOu

最新推荐文章于 2023-09-13 17:52:39 发布

阅读量511

点赞数

分类专栏： Vue JS ES6 文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_42154259/article/details/106921538

版权

Vue 同时被 3 个专栏收录

13 篇文章 1 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

ES6

13 篇文章 0 订阅

订阅专栏

第一节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>

看到的效果就是：
在这里插入图片描述
点击按钮之后：

这样就动态绑定属性并且重新渲染了，声明式编程就是爽

CoderOu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue官网学习（模板语法：三、v-bind指令）

第一节Vue官网学习（模板语法：一、{{}}双大括号语法）我们说到了双大括号语法，他会随着Vue示例中data属性下面的属性名称的值改变而改变，有时候我们也需要一些属性随着业务或者操作而改变。比如disabled属性，readonly属性，src属性,href属性，双大括号语法只能作用在html标签内部，像这种属性的是无法生效的，那么v-bind指令就专门针对这种属性的绑定而生。v-bind:disabled=“btnIsDisabled”v-bind:readonly="inputIsReadon
复制链接

扫一扫