Question

如何利用VueJS创建动态的下拉框并绑定数据源

Answer 1

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

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

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

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

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

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