效果：V-if成立时，元素出现；不成立时，元素不显示。 【Vue|【Vue】V-if成立时，元素出现；不成立时，元素不显示。】V-if成立时，元素出现
文章图片
不成立时，元素不显示
文章图片
代码 关键点： < a v-if=“checkedNames.length > 0” :href=https://www.it610.com/article/“‘/PPDASH/compare_by_different_employee2/’+this.checkedNames”>生成
{% extends 'PPDASH/base.html' %}
{% load static %}{% block body_block %}>
window.onload = function(){
paradom1 = document.getElementsByClassName("p1")
console.log(paradom1)
for (i = 0 ;
i < paradom1.length;
i++) {
var para = document.getElementsByClassName("p1")[i];
if (para.textContent <=35) {para.style.color = "red";
}else if (para.textContent <65) {para.style.color = "orange";
}else{para.style.color = "green";
}
}
}
src="http://img.readke.com/220630/16322J110-2.jpg">查询结果如下
自动生成对比图（前20名）
>勾选工号生成对比图
>[[ checkedNames ]]
生成
勾选
工號
姓名
部門
Level
Function
批次
接纳反馈
学习敏锐度
结果导向
全局思维
适应力
成就他人
领导意愿
平衡人际与任务
辅导*
授权委责*
建立成功团队*
管理人际关系*
影响力*
建立伙伴关系*
计划与组织*
{% for employee in pageInfo.object_list %}
{{ employee.eid }}
{{ employee.name }}
{{ employee.dept_code }}
{{ employee.level }}
{{ employee.function }}
{{ employee.batch }}
{{ employee.score_jieshoufankui }}
{{ employee.score_xueximinruidu }}
{{ employee.score_jieguodaoxiang }}
{{ employee.score_quanjusiwei }}
{{ employee.score_shiyingli }}
{{ employee.score_chengjiutaren }}
{{ employee.score_lingdaoyiyuan }}
{{ employee.score_pinghengrenjiyurenwu }}
{{ employee.score_fudao }}
{{ employee.score_shouquanweize }}
{{ employee.score_jianlichenggongtuandui }}
{{ employee.score_guanlirenjiguanxi }}
{{ employee.score_yingxiangli }}
{{ employee.score_jianlihuobanguanxi }}
{{ employee.score_jihuayuzuzhi }}
{% endfor %}
{% if pageInfo.has_previous %}
上一页
{% endif %}{% if pageInfo.object_list %}
{% for page in pageInfo.paginator.page_range %}
{% if pageInfo.number == page %}
本页
{% else %}
{{ page }}
{% endif %}
{% endfor %}
{% endif %}{% if pageInfo.has_next %}
下一页
{% endif %}
type="text/javascript">
// 获取变量值
// var plantid_list_js = JSON.parse('{{ plantid_list|safe }}');
// var function_list_js = JSON.parse('{{ function_list|safe }}');
// var name_list_js = JSON.parse('{{ name_list|safe }}');
var app = new Vue({
delimiters:['[[', ']]'],
el: '#app',
data() {
return {
checkedNames: [],
// message_plantid: '',
// message_dept: '',
// message_function: '',
// message_eid: '',
// message_name: '',
// // options: ['P1','P3','P6','其他'],
// plantid_options: plantid_list_js,
// function_options: function_list_js,
// name_options: name_list_js,
}
},
methods:{
// add:function () {
//this.arrlist.push()
// }
},
computed: {
// // 计算属性的 getter
// checkedNames_trim: function () {
// // `this` 指向 vm 实例
// return this.checkedNames
// }
}
});
{% endblock %}{% block footer_block %}{% endblock %}
推荐阅读
- 编程语言|前端初学者的痛（没学历没工作经验如何找工作（））
- html5|前端好找工作吗（现在前端还值得入行吗？）
- 如何完成一份优秀的前端求职简历（）
- 前端|前端求职难（那是你没看见这个）
- javaScript原型和原型链
- 测试一下Pinia，Vuex 要出局了（）
- LeetCode 3. 无重复字符的最长子串
- Data|Web Scraping with Beautiful Soup for Data Scientist
- JavaScript|JavaScript基础之浅谈原型和原型链