【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 %}


<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>


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


<div class="container-fluid" id="app">
    <p class="my-3">
        查询结果如下  
        <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">Levelth>
                <th scope="col">Functionth>
                <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 %}