vue怎么动态添加属性

<ul class="rs_tree">

<li v-for="node in treeData">

<div @click="childrenShow(node,$event)" class="rs_tree_text">

<span class="rs_tree_dot" v-if="!isFolder(node)"></span>

<em class="fa fa-folder" v-if="isFolder(node)&&!node.isShow"></em>

<em class="fa fa-folder-open" v-if="isFolder(node)&&node.isShow"></em>

<span class="rs_tree_label">{{node.text}}</span>

<input type="text" class="rs_edit_input" v-model="node.text" @click="stop($event)" @keyup.enter="editEnd()">

<div class="rs_tree_icon" v-if="node.add" @click="addItem(node,$event)" title="新增"><i class="fa fa-plus"></i></div>

<div class="rs_tree_icon" v-if="node.edit" @click="editItem(node,$event)" title="编辑"><i class="fa fa-edit"></i></div>

<div class="rs_tree_icon" v-if="node.del" @click="delItem(node,$event)" title="删除"><i class="fa fa-trash"></i></div>

</div>

<items v-if="isFolder(node)" v-show="node.isShow" :tree-data="node.children" transition="node-down"></items>

</li>

*** 作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

vue官方文档对于class和style绑定有两种方法，对象语法和数组语法。

1.绑定 HTML Class对象绑定

我们用传给v-bind:class 一个对象，动态切换class 是否存在

<div v-bind:class="{ active: isActive }"></div>//这里我们使用isActive 这个变量动态判断active是否显示到html

vue对象里面

data: {

isActive:true,//判断是否显示active这个class

}

页面渲染为：

<div class="active"></div>

当然我们也可以对象中传入更多属性来动态切换多个 class，此外，v-bind:class 指令也可以与普通的 class 属性共存。

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">  动态切换多个 class</div>

vue对象里面

data: {

isActive:true,

hasError:false

}

页面渲染为：

<div class="static active">  动态切换多个 class</div>

对于上面v-bind:class 指令我们也可以传一个对象

<div v-bind:class="classObject">动态切换多个 class</div>

data: {

  classObject: {

    active: true,

    'text-danger': false

  }

}

页面渲染为：

<div class="active">  动态切换多个 class</div>

对于动态class绑定我们也可以通过计算属性返回对象来动态判断class的绑定值

<div v-bind:class="classObject"></div>

data: {

  isActive: true,

  error: null

},

computed: {

  classObject: function () {

    return {

      active: this.isActive &&!this.error,

      'text-danger': this.error &&this.error.type === 'fatal'

    }

  }

}

2.绑定 HTML Class数组语法

除了对象语法绑定class,我们还有一种方法是数组语法，我们可以把一个数组传给 v-bind:class。

<div v-bind:class="[activeClass, errorClass]"></div>

data: {

  activeClass: 'active',

  errorClass: 'text-danger'

}

页面渲染为

<div class="active text-danger"></div>

我们也可以通过三元表达式来进行判断切换class:

<div v-bind:class="[isActive ? activeClass : ' ', errorClass]"></div>  //这里判断是如果isActive 为true显示activeClass ，errorClass，否则只显示errorClass

对于class绑定当有多个条件 class 时这样写有些繁琐，在数组语法中也可以使用对象语法。

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 <div class="app">

        <h1 v-show="false">我爱你</h1>

v-if是直接将dom删除了，在dom文档中已经找不到对应的dom，变成了注释

        <h1 v-if="false">我爱你</h1>

如果频繁使用 就使用v-show 可以节约性能开销

如果短暂使用，例如页面一开始加载的时候进行判断显示 优先使用v-if

实际开发中，使用v-if比较多

        <li v-for="(item,index) in arr">{{item}}</li>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        new Vue({

            el: '.app',

            data: {

                msg: 123,

                list: [1, 2, 3]

            },

            computed: {

                arr: function () {

                    return this.list.filter(r =>r >1)

                }

            },

            methods: {

            }

        })

    </script>

<div class="app">

        <child1></child1>

        <div><child-a/></div>

        <div><child-b/></div>

        <template id="childB">

            <div>

                <h1>我是程序员</h1>

                <h1>我是程序员</h1>

            </div>

        </template>

    </div>

    <script src="./node_modules/vue/dist/vue.min.js"></script>

    <script>

        Vue.component('child1',{

            template:`<h1>我是child1</h1>`

        })

        Vue.component('childA',{

            template:`<h1>我是childA</h1>`

        })

        Vue.component('childB',{

            template:'#childB'

        })

        new Vue({

            el:'.app'

        })

    </script>

<div class="app" v-cloak>

        <h1>{{'我爱张sir'|str('金牌厨师')}}</h1>

        <h1>{{'hello'|he}}</h1>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        Vue.filter('fn',function(v,s){

            console.log(v)

            return v/* .substring(0,v.indexOf(':')) */+s

        })

        new Vue({

            el:'.app',

            /* 局部过滤器 */

            filters:{

                str(v,s){

                    return v+s

                },

                he(v){

                    return v.split('').reverse().join('')

                }

            }

        })

当页面刷新的时候data中的数据还没有渲染出来，页面中就会显示原本写的插值语法，这时候就需要消除这个bug

在绑定的实例化对象的元素上上添加v-cloak 并在style样式中添加（只要前面加上v-都可以实现，随意命名，通常使用clock）

            display: none

        }

    <div class="app">

        <input type="text" v-bg>

        <input type="text" v-focus="{background:'yellow'}">

        <div style="width: 100pxheight: 100px" v-bg></div>

        <p v-sty="{background:'pink',color:'yellow'}">我是程序员</p>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        Vue.directive('bg', function (el) {

            /* 回调的第一个参数就是元素本身 */

            console.log(el)

            el.style.background = 'red'

        })

        /* 全局自定义指令 写全方式 */

        Vue.directive('focus', {

            /* 当绑定元素插入到DOM中 */

            inserted: function (el, bind) {

                el.focus()

                console.log(bind)

                el.style.background = bind.value.background

            }

        })

        new Vue({

            el: '.app',

            /* 局部的自定义指令 要加s */

            directives: {

                sty: {

                    inserted (el, bind) {

                        el.style.background = bind.value.background

                        el.style.color = bind.value.color

                    }

                }

            }

        })

---