Select选择框极其值获取，默认选择

编程语言:

以上实现了基本的select数据读取，select选择内容的呈现，已经结果的绑定。首先，通过v-for属性遍历vue中定义的编程语言languages，并将languages中的每项数据的code赋值给option的value，desc赋值给option的描述部分。

同时，select标签上绑定了languageSelected，用来接收和初始化数据。

但上面的写法有一个问题，就是默认没有选择项，显示空白。那么如何提供默认的选择数据呢。有几种方法可供选择。

第一，通过created方法来初始化languageSelected数据，修改之后的代码如下：

var app = new Vue({
        el: "#app",
        data: {
            languages: [
                    code: 'Java',
                    desc: 'Java语言'
                    code: 'Python',
                    desc: 'Python语言'
                    code: 'PHP',
                    desc: 'PHP语言'
            languageSelected: null
        created() {
            this.languageSelected = this.languages[1].code;
这样，在初始化的时候，将languageSelected赋值，vue会自动匹配并进行绑定变更。当然这里只是直接获得数组中的数据，在实践的过程中，往往是获得服务器的数据。
第二种方案：直接初始化时赋值languageSelected，实例代码如下：
var app = new Vue({
        el: "#app",
        data: {
            languages: [
                    code: 'Java',
                    desc: 'Java语言'
                    code: 'Python',
                    desc: 'Python语言'
                    code: 'PHP',
                    desc: 'PHP语言'
            languageSelected: 'PHP'
这种方案与第一种方案差不多，只不过初始化时机不同。
change事件
经过上面的方式以及进行select的初始化和默认项选择，那么如何监听select的选中事件并进行相应的操作呢。在vue中，直接获取对应的绑定值即可。
首先通过@change绑定监听事件selectChanged，并在vue的method中定义对应的方法。
<select id="languages" v-model="languageSelected" @change="selectChanged">
        <option :value="language.code" v-for="language in languages">{{language.desc}}</option>
    </select>
methods: {
            selectChanged: function () {
                console.log(app.languageSelected);
在定义的方法中打印了当前被选中的option的值。其他业务逻辑可根据此值进行相应的操作。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>vue中Select选择框及change事件，默认选择</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<H1>Select选择框极其值获取，默认选择</H1>
<div id="app">
    <label for="languages">编程语言:</label>
    <select id="languages" v-model="languageSelected" @change="selectChanged">
        <option :value="language.code" v-for="language in languages">{{language.desc}}</option>
    </select>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            languages: [
                    code: 'Java',
                    desc: 'Java语言'
                    code: 'Python',
                    desc: 'Python语言'
                    code: 'PHP',
                    desc: 'PHP语言'
            languageSelected: null
        created() {
            this.languageSelected = this.languages[1].code;
        methods: {
            selectChanged: function () {
                console.log(app.languageSelected);
</script>
</body>
</html>

关注公众号：程序新视界，一个让你软实力、硬技术同步提升的平台
除非注明，否则均为程序新视界原创文章，转载必须以链接形式标明本文链接
本文链接：http://www.choupangxia.com/2019/09/24/vue%e4%b8%adselect%e7%9a%84%e4%bd%bf%e7%94%a8%e3%80%81%e9%bb%98%e8%ae%a4%e9%80%89%e6%8b%a9%e3%80%81onchange-change%e4%ba%8b%e4%bb%b6%e7%ad%89%e6%93%8d%e4%bd%9c%e5%ae%9e%e4%be%8b/
            
		前一页 上一篇： Mac下使用tree打印项目目录结构或目录树
后一页 下一篇： SpringBoot中CommandLineRunner和ApplicationRunner接口解析和使用
微信公号：程序新视界
一个软技能、硬实力同时提升的公众号。
Spring Boot出版书籍
视频教程
《Spring Boot 视频教程全家桶》
《Drools7基础和Workbench实战套餐》
《Drools 7系列优惠套餐》
《Drools 7 规则引擎入门教程》
《Drools 7 规则引擎进阶教程》
《Drools规则引擎之决策表从入门到精通》
	ChatGPT
	
docker
	
drools
	
fastdfs
	
freemarker
	
Golang
	
JavaFx
	
jqGrid
	
LeetCode算法
	
Linux
	
log4j
	
matplotlib
	
Maven
	
mybatis
	
mysql
	
nacos
	
netty
	
Nginx
	
postGreSQL
	
python
	
redis
	
shiro
	
slf4j
	
solidity
	
spring
	
spring
	
Spring Boot
	
Spring Cloud
	
wildfly
					检索增强生成（RAG）在大语言模型中的应用
					matplotlib的scatter()函数和plot()函数的区别
					NumPy求解线性方程组linalg.solve函数详解
					误差的希腊符号表示是什么
					Python中有哪些可迭代对象
		
友链
Felordcn
Cryptospace