[JavaScript知识库]【Vue】V-if成立时，元素出现；不成立时，元素不显示。

效果：V-if成立时，元素出现；不成立时，元素不显示。

V-if成立时，元素出现

不成立时，元素不显示

代码

关键点： < a v-if=“checkedNames.length > 0” :href=“‘/PPDASH/compare_by_different_employee2/’+this.checkedNames” >生成

{% extends 'PPDASH/base.html' %}
{% load static %}

{% block body_block %}

<!-- 调整color的js脚本开始 -->
<script>
    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";}
        }
    }
</script>
<!-- 调整color的js脚本介绍 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div class="container-fluid" id="app">
    <p class="my-3">
        查询结果如下&nbsp;&nbsp;
        <a href="/PPDASH/compare_by_different_employee/{{ employee_list }}/" >自动生成对比图（前20名）</a>
        <span>勾选工号生成对比图</span>
        <span>[[ checkedNames ]]</span>
        <a v-if="checkedNames.length > 0" :href="'/PPDASH/compare_by_different_employee2/'+this.checkedNames" >生成</a>
    </p>

    <table class="table table-striped table-bordered" >
        <thead>
            <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:10px;">
                <th scope="col">勾选</th>
                <th scope="col">工號</th>
                <th scope="col" style="width:80px;">姓名</th>
                <th scope="col">部門</th>
                <th scope="col">Level</th>
                <th scope="col">Function</th>
                <th scope="col">批次</th>
                <th scope="col">接纳反馈</th>
                <th scope="col">学习敏锐度</th>
                <th scope="col">结果导向</th>
                <th scope="col">全局思维</th>
                <th scope="col">适应力</th>
                <th scope="col">成就他人</th>
                <th scope="col">领导意愿</th>
                <th scope="col">平衡人际与任务</th>
                <th scope="col">辅导*</th>
                <th scope="col">授权委责*</th>
                <th scope="col">建立成功团队*</th>
                <th scope="col">管理人际关系*</th>
                <th scope="col">影响力*</th>
                <th scope="col">建立伙伴关系*</th>
                <th scope="col">计划与组织*</th>
            </tr>
        </thead>

    
        {% for employee in pageInfo.object_list %}
        <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
            <td><input type="checkbox" id="{{ employee.eid }}" value="{{ employee.eid }}" v-model="checkedNames" /></td>
            <td><a href="/PPDASH/search_results/{{ employee.eid }}/">{{ employee.eid }}</a></td>
            <td>{{ employee.name }}</td>
            <td>{{ employee.dept_code }}</td>
            <td>{{ employee.level }}</td>
            <td>{{ employee.function }}</td>
            <td>{{ employee.batch }}</td>
            <td class="p1">{{ employee.score_jieshoufankui }}</td>
            <td class="p1">{{ employee.score_xueximinruidu }}</td>
            <td class="p1">{{ employee.score_jieguodaoxiang }}</td>
            <td class="p1">{{ employee.score_quanjusiwei }}</td>
            <td class="p1">{{ employee.score_shiyingli }}</td>
            <td class="p1">{{ employee.score_chengjiutaren }}</td>
            <td class="p1">{{ employee.score_lingdaoyiyuan }}</td>
            <td class="p1">{{ employee.score_pinghengrenjiyurenwu }}</td>
            <td class="p1">{{ employee.score_fudao }}</td>
            <td class="p1">{{ employee.score_shouquanweize }}</td>
            <td class="p1">{{ employee.score_jianlichenggongtuandui }}</td>
            <td class="p1">{{ employee.score_guanlirenjiguanxi }}</td>
            <td class="p1">{{ employee.score_yingxiangli }}</td>
            <td class="p1">{{ employee.score_jianlihuobanguanxi }}</td>
            <td class="p1">{{ employee.score_jihuayuzuzhi }}</td>
        </tr>
        {% endfor %}

    </table>


    <!--分页功能-->
    <div class="pagelist">
        {% if pageInfo.has_previous %}
            <a href="{% url 'search_results' pageInfo.previous_page_number %}">上一页</a>
        {% endif %}
                    
        {% if pageInfo.object_list %}
            {% for page in pageInfo.paginator.page_range %}
                {% if pageInfo.number == page %}
                    <a href="javascript:;" class="curPage">本页</a>
                {% else %}
                    <a href="{% url 'search_results' page %}">{{ page }}</a>
                {% endif %}
            {% endfor %}
        {% endif %}
                    
        {% if pageInfo.has_next %}
            <a href="{% url 'search_results' pageInfo.next_page_number %}">下一页</a>
        {% endif %}
    </div>

</div>






<script 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
            // }
        }
    });

</script>




{% endblock %}



<!-- 不用页脚 -->
{% block footer_block %}

{% endblock %}