Vue官网学习（模板语法：六、动态属性名：Invalid value for dynamic directive argument (expected string or null)异常）

以往我们通过v-bind指令绑定我们已知的属性名，通过v-on指令绑定事件，而这些属性或者事件名都是预先写好的，可能有些时候，我们可能会去动态的改变属性名，并且根据不同情况去操作不同的属性或者事件，按照以往实现起来很难。
Vue2.6.0 新增了动态属性这一功能，给了我们很大的便捷：
使用方法：

v-bind:[attrname]="attrValue";
v-on:[eventname]="doSomething";

其中：attrname为一个变量，Vue实例中的data属性下面的一个属性名，attrValue和doSomething是属性值和事件执行的方法。
注意：attrname和eventname这里我没有使用驼峰，不是我不想用驼峰，也不是规范说不能用驼峰

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写

这是官网的原话，他会把驼峰转换成小写，如果转换成小写，无法跟Vue实例中的data属性里面的属性名称对应，就会报错如下异常：

Invalid value for dynamic directive argument (expected string or null):

写一个小小的demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态属性</title>
</head>
<body>
<div id="app">
  <input type="text" v-bind:[attrname]="attrValue"/>
  <button @click="changeAttr">改变属性</button>
</div>
</body>
<script src="../static/js/Vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      attrname: 'readonly',
      attrValue: true
    },
    methods: {
      changeAttr(){
      	// 改变属性名
        this.attrname = 'value';
        // 改变属性值
        this.attrValue = "我是value属性的值"
      }
    }
  })
</script>
</html>

打开输入框就是readonly:
在这里插入图片描述
点击按钮之后（值有了，并且可以输入了）

PS：当属性值为null的时候，Vue会移除此属性或者事件绑定，如果我们想移除的时候，将其值设置为null就可以了，不过我们在设置值的时候也要注意使其不为null，不然导致属性或者事件失效

Vue官网学习（模板语法：六、动态属性名：Invalid value for dynamic directive argument (expected string or null)异常）

猜你喜欢