VUE的一些应用

最新推荐文章于 2024-08-06 10:00:00 发布

用户147258369

最新推荐文章于 2024-08-06 10:00:00 发布

阅读量1.1k

点赞数

分类专栏： html+js类文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/hyq_07_27/article/details/121471533

版权

html+js类专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文探讨了前端开发中的一些关键技术点，包括HTML、CSS和JavaScript的使用，以及Vue.js框架的应用。通过示例展示了如何实现表格样式设置、动态SELECT选项处理以及事件监听。在表格中，讲解了如何设置title属性和实现隔行换色效果。同时，还介绍了在Vue中如何获取SELECT选中的label值，并动态更新数据。此外，文章还提到了防止SELECT选项重复展示的策略。

摘要由CSDN通过智能技术生成

table 中的属性，如 title。

<td class="name"  :title="article.ProjectID">{{article.ProjectID}}</td>

id也是前要加上:
实际上为：

<td title="Gxxxx"  class="name">Gxxx</td>

实现table 隔行换色的功能

 <tr  :class="i%2==0 ? colors[0]: colors[1]">

data: {
	colors: ["evn", "odd"], 
}

select 获取当前的对象，就是jquery中的this。以及获取select的label值

 <select class="hcp"  v-model="fee.sm" v-on:change="getVendorId(index ,$event)">
	<option v-for="sls in sllist" :value="sls.code" :label="sls.name">{{sls.name}}</option>
</select>

data() { 
	sllist: [{ code: "CN014", name: "14%认证抵抗" }, { code: "CN015", name: "9%认证抵抗" }, { code: "CN016", name: "6%认证抵抗" }, { code: "CN017", name: "9%旅客运输服务" }],
	}

 getVendorId: function (index, event) {
                var row = this.FeeTypeList["feelist"][index];
                //获取点击对象      
                var obj = event.currentTarget;
                row.sl = obj.options[obj.selectedIndex].label;//获取label
            },

动态 SELECT 选项不重复展示。

 <select v-model="item.feetype" v-on:change="changeFeetype()">
	<!--item.feetype==feetype 表示有初始值时，则显示该值，无初始值时使用下面规则-->
	<!--!FeeTypeList.find(t=>t.feetype==feetype)表示需要展示的数据不存在于已选列表-->
	<option v-for="feetype in feetypelists" v-show="item.feetype==feetype || !FeeTypeList.find(t=>t.feetype==feetype)" :value="feetype">{{feetype}}</option>
</select>