vue如何动态添加多个li

1、新建html文档，在head标签中引入vue的js文件。

2、在body标签中添加一个id为“app”的div标签。

3、在这个div标签中再添加一个div标签，在vue中添加一个变量数据。

4、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素。

对于我们动态添加样式，可以在:style里面，但是伪类动态添加就不行了，我就在想能不能在data中定义，然后在伪类中使用

我是在一个组件中使用的，小伙伴只需要看伪类动态的样式即可

一、Vue css过渡的基本语法

<div v-if="show" :transition="expand">hello</div>

然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS

/* 必需 */

.expand-transition {

transition: all .3s ease

height: 30px

padding: 10px

background-color: #eee

overflow: hidden

}

/* .expand-enter 定义进入的开始状态 */

/* .expand-leave 定义离开的结束状态 */

.expand-enter, .expand-leave {

height: 0

padding: 0 10px

opacity: 0

}

你可以在同一元素上通过动态绑定实现不同的过渡：

<div v-if="show" :transition="transitionName">hello</div>

new Vue({

el: '...',

data: {

show: false,

transitionName: 'fade'

}

})

---