Cómo usar VueJS para crear un cuadro desplegable dinámico y vincular una fuente de datos

El primer paso es crear una nueva página HTML5 en blanco select.html en la herramienta de edición HBuilder e introducir el archivo js central de VueJS, como se muestra a continuación:

El segundo paso es insertar div y seleccionar en el cuerpo elemento de etiqueta. Y preste atención para asignar el valor del atributo id al elemento de etiqueta especificado, como se muestra en la siguiente figura:

Paso 3. Escriba la fuente de datos y los elementos de enlace utilizados para generar el cuadro desplegable debajo del div. El cuadro desplegable tiene valores y texto, como se muestra en la siguiente figura:

El cuarto paso es. obtenga una vista previa de la página estática y descubra que no hay nada en el cuadro desplegable No; abra la consola del navegador y encuentre un error, como se muestra a continuación:

Paso 5, modifique el formulario de enlace de datos de la opción. etiqueta, use v-bind para cambiar sel en el código js son datos, como se muestra en la siguiente figura:

6

Paso 6, obtenga una vista previa de la página estática nuevamente y descubra que la fuente de datos del cuadro desplegable se ha vinculado correctamente y se puede seleccionar

.