vue如何动态添加多个li

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

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

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

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

第一步，创建静态页面vhtml.html，并引入vue.js文件

第二步，在元素内插入两个div，一个作为外层div，另外一个作为子div，并在父div绑定v-html指令

第三步，绑定v-html指令数据，这里设置为字符串

第四步，Vue.js库的v-html指令是插入html元素，修改datas为包含

标签

第五步，预览该静态页面，这时会看到页面显示为“v-html指令”

第六步，将调试打开，这时发现

中有个

标签，就成功地添加了html元素。

第一步，在HBuilder编辑工具新建HTML5空白页面select.html，并引入VueJS核心js文件，如下图所示：

第二步，在body标签元素内插入div和select，注意给指定标签元素id属性值，如下图所示：

第三步，在div下方编写生成下拉框的数据源和绑定元素，下拉框有value和text，如下图所示：

第四步，预览该静态页面，发现下拉框什么都没有；打开浏览器控制台发现出现错误，如下图所示：

第五步，修改option标签数据绑定形式，利用v-bind，将js代码中的sel改为data，如下图所示：

6

第六步，再次预览该静态页面，发现下拉框数据源正确绑定，可以选择，如下图所示：

---