Vue——动态参数的应用

Vue动态参数

1.用法

官网说，从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数。

eg:
<a v-bind:[attributeName]="url"> ... </a>  
可以简写为
<a :[attributeName]="url"> ... </a>  

<a v-on:[eventName]="doSomething"> ... </a>
可以简写为
<a @[eventName]="doSomething"> ... </a>

<a v-bind:[someAttr]="value"> ... </a>

对动态表达式的约束，因为某些字符如空格、引号，放在HTML attribute名里面是无效的，所以在我们使用动态参数的时候，可以使用变量给字符串命名后使用，也可以使用计算属性来返回一个变量用于动态参数的显示。

变量形式:
<template>
    <input @[type?up:down]="event1" id="dynamicParam" name="dynamicParam" type="text">
</template>
<script>
	export default{
		data(){
			return {
				type:false,
				up:'keyup',
				down:'keydown'
			}
		}
	}
</script>
计算属性形式：
<template>
	<div class="dynamicParamter">	
	 	<label for="dynamicParam">动态参数</label>
    	<input @[type]="event1" id="dynamicParam" name="dynamicParam" type="text">
    	<button @click="type1=true">按键</button>
    	<button @click="type1=false">键盘抬起</button>
	</div>
</template>
<script>
  export default{
    data(){
      return {
        href:'href',
        url:'',
        type1:null,
      }
    },
    methods:{
      event1(){
        console.log("触发"+(this.type)+'事件')
      }
    },
    computed:{
      type(){
        if(this.type1){
          return 'keyup'
        }else{
          return 'keydown'
        }
      }
    }
  }
</script>

2.实例

实例启发来源
今天在重温Vue文档时，看到了2.6.0版本新增的动态参数，让我们一起详细的了解一下吧：
使用Vue动态参数主要有以下两个例子：

eg1:
<template>
  <div class="dynamicParamter">
    <label for="dynamicParam">动态参数</label>
    <input @[eventName]="event" id="dynamicParam" name="dynamicParam" type="text">
    <button @click="eventName='focus'">获取焦点</button>
    <button @click="eventName='keydown'">按键</button>
    <button @click="eventName='keyup'">键盘抬起</button><br/>
  </div>
</template>
export default{
    data(){
      return {
        eventName:'',
      }
    },
    methods:{
      event(){
        console.log("点击不同的按钮，会检测不同的事件，从而做接下来的操作",this.eventName);
        if(this.eventName==='focus'){
          console.log('这是获取焦点事件，我们可以在此时做一些操作');
        }
        if(this.eventName==='keydown'){
          console.log('这是按下按键事件，我们可以在此时做一些操作');
        }
        if(this.eventName==='keyup'){
          console.log('这是键盘抬起事件，我们可以在此时做一些操作');
        }
      },
    }
  }

从以上的例子我们可以了解到，当我们在点击不同按键的时候，就会切换到不同的功能，我们就可以根据所选的不同功能执行相应的操作。

eg2:
<template>
  <div class="dynamicParamter">
  	<label for="dynamicParam">动态参数</label>
    <input @[type?up:down]="event1" id="dynamicParam" name="dynamicParam" type="text">
    <button @click="type=true">按键</button>
    <button @click="type=false">键盘抬起</button>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        up:'keyup',
        down:'keydown',
        type:null,
      }
    },
    methods:{
      event1(){
        console.log("触发"+(this.type?'keyup':'keydown')+'事件')
      }
    }
  }
</script>

以上示例我们可以看出，我们可以通过type类型的不同，从而设置不同的事件。但需要注意的是，我们将事件名称没有直接写在三元表达式里，而是定义了两个变量，这是由于动态表达式对其的约束，动态表达式有一些语法的约束，某些字符例如空格、引号放在HTML特姓名里面是无效的。