v-for="(item,index) in list"
:key="index"
v-on:[eventName]="handleClick(item.doSome,index)"
>我的是动态元素--{
{item.doSome}}</button>
<button @click="allClick">双点所有按钮失效</button>
</template>
<script>
export default {
name: "app",
data() {
return {
list: [
{ doSome: "doSomg1" },
{ doSome: "doSomg2" },
{ doSome: "doSomg3" },
{ doSome: "doSomg4" },
{ doSome: "doSomg5" },
{ doSome: "doSomg6" }
eventName: "click",
newArrys: new Array(5),
mounted() {
var s = new Array(5);
console.log(this.newArrys);
methods: {
handleClick(i, inedx) {
let doSomes = i;
this[doSomes](inedx);
doSomg1(inedx) {
this.newArrys[inedx] = !this.newArrys[inedx];
if (this.newArrys[inedx]) {
console.log("doSomg1", this.newArrys[inedx]);
doSomg2(inedx) {
console.log("doSomg2");
doSomg3(inedx) {
console.log("doSomg3");
doSomg4(inedx) {
console.log("doSomg4");
doSomg5(inedx) {
console.log("doSomg5");
doSomg6(inedx) {
console.log("doSomg6");
allClick(){
this.eventName=='click'? this.eventName=null: this.eventName='click'
</script>
<template> <div id="app"> <div class="dynamic"> <button class="dynamic-item" v-for="(item,index) in list" :key="index" v-on:[eventName]="handleClick(item.doSome,index)" >我的是动态元素--{{i
绑
定
是什么
在了解
绑
定
是什么之前，先了解一下什么是指令：
在 ”
vue
” 中，指令是带有 v- 前缀的特殊属性，用来修饰标签的（自
定
义组件在这里也统一归为标签，因为其使用方式和原生标签一样），其值的约束和模板语法一样，支持表达式、变量。
指令会监测其值的变化，并将其的变化反应给所处的DOM
我们来看一下上一章最后的例子：
用jquery的时候你会发现，页面渲染后
动态
生成的dom，在生成之前的代码是没办法取到相应对象的，必须重新获取.但是
vue
基于数据
绑
定
的特性让它能生成的时候直接
绑
定
数据。
html:
vue
js中的
事件
绑
定
，使用<v xss=removed>来完成的，这里函数名是
定
义在
Vue
实例中的methods对象中的，
Vue
实例可以直接访问其中的方法。
二、
事件
绑
定
方式
1、 直接在标签中写js方法
<button v-on:click=alert（'hi'）>执行方法的第一种
写法
</button>
2、调用method的办法
<button v-on:click=run()>执行方法的第一种
写法
</button>
<button @click=run()>执行方法的 简写
写法
</button>
export default {
data ()
在上图中将a标签的href属性值设置为toutiao，
VUE
实例将自动去data里面寻找toutiao属性进行值
绑
定
。
不只是a标签，所有的html标签属性都可以通过v-bind进行值
绑
定
，然后通过改变数据
动态
改变它的属性值。
错误的
写法
注意一下：初学者容易犯错,这样写是错误的，v-bind:h
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
动态
参数
绑
定
属性名：
<a v-bind:[attributeName]="url"> ... </a>
attributeName 是一个 JavaScript 表达式进行
动态
求值，求得的值将会作为最终的参数来使用。
Vue
实例有一个 data 属性 attributeName...
我们想要实现上面点击button按钮实现tab栏切换，可以通过如下两种方式：
第一个是使用v-if进行判断,代码如图所示：
我们通过一个变量当前的值是否为某一个字符串，来确
定
是否需要展示某一个组件。但是明显存在一个缺点就是代码过于繁琐。
第二个方法:采用
动态
组件的形式
动态
组件component是一个全局注册的组件，其中存在一个属性为is,值为组件名，并且兼容大小写。
二、参数传入
如果想要在component上向某一个组件上传递属
通过使用保留的 <component> 元素，
动态
地
绑
定
到它的 is 特性，我们让多个组件可以使用同一个挂载点，并
动态
切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。
父组件就可以通过is方法，在一个挂载点上
动态
的切换多个子组件
<template>
<!--
动态
组件 -->
<div class="dynamicCom
最近在使用
vue
-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单，按照官网
写法
固
定
不太好，因为一般项目都是从后端
动态
获取菜单列表，所以我们需要将官网代码稍作修改，代码如下：
注意事项：
【1】菜单高亮部分
动态
绑
定
路由跳转的页面
Menu组件中有一个active-name反映的是当前高亮区域，因此可以
动态
的
绑
定
active-name来实现高亮显示。前提是需要将MenuItem
绑
定
的name也设置成页面路由的name
【2】
动态
获取菜单数据，需要更新菜单
this.$nextTick(() => {
this.$refs.side_menu.updateOpen
现在很多网站，都是希望
动态
切换class，更换css样式。下面我们使用
Vue
的v-bind
绑
定
class
v-bind
动态
绑
定
class
对象语法
绑
定
（常用）
red和size的值为true就在class显示red和size，false就不显示。下面有两种
写法
：
<style>
.red{
color: red;
.size{
font-size: 20px;
</style>
<!--
写法
一-->
{{list}}
如果 status为其他，样式为greenRoom2
:class=”{‘redRoom’: Number(items.status) === 1, ‘greenRoom1’: Number(items.status) === 2, greenRoom2: Number(items.status) > 2}”
补充知识：
vue
根据变量值来判断显示class
我就废话不多说了，大家还是直接看代码吧~
<div :class=”[‘bottom-btn’,{‘face-btn’:type==’
<div id="app">
<button @[n.value]="doEvent(n.value)" v-for="(n,i) of eventList" :key="i">{{n.name}}</button>
<script src="./
vue
.js"></script>
<script>
var app = .
遇到一个问题,一个点击方法在v-for里的一个元素上,由于该方法需要处理本次循环的数据并影响本次循环的其他元素,所以暂时没有想到可以把方法声明在
vue
的methods里的方法,所以就直接写在了元素上:
<view @click="function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}">
<view style="width: 50vw;" >回收物品</
