我正在使用 alpine js,并且我不能在(if)中有复杂的条件,例如:x-if =“a > b”,小于号在alpine中不起作用

Ami*_*mir 3 javascript syntax-error conditional-statements alpine.js

这是我的所有代码:\nin x-if 模板我不能使用“">”或“<”符号,并且在 x-data 中也不能有函数和 if 来比较两个值是否有任何解决方案?

\n
      <body>\n        <div\n          class="container"\n          x-data="{\n            selectedMonth: 0,\n            clicked: null,\n            daysGone: 0,\n            counter: 0,\n            allCells: 0,\n    \n            goAhead(){\n                this.counter = this.counter + 1;\n                return this.counter; \n            },\n    \n            events: localStorage.getItem('events') ? JSON.parse(localStorage.getItem('events')) : [],\n            days: ['\xd8\xb4\xd9\x86\xd8\xa8\xd9\x87','\xdb\x8c\xda\xa9\xd8\xb4\xd9\x86\xd8\xa8\xd9\x87','\xd8\xaf\xd9\x88\xd8\xb4\xd9\x86\xd8\xa8\xd9\x87','\xd8\xb3\xd8\xb4\xd9\x86\xd8\xa8\xd9\x87','\xda\x86\xd9\x87\xd8\xa7\xd8\xb1\xd8\xb4\xd9\x86\xd8\xa8\xd9\x87','\xd9\xbe\xd9\x86\xd8\xac\xd8\xb4\xd9\x86\xd8\xa8\xd9\x87','\xd8\xac\xd9\x85\xd8\xb9\xd9\x87'],\n            \n            load(){\n                const dt = new persianDate();\n                \n                const day = dt.toLocale('fa').format('DD');\n                const month = dt.toLocale('fa').format('MM');\n                const year = dt.toLocale('fa').format('YYYY');\n    \n                var dayName = dt.toLocale('fa').format('dddd');\n    \n                const firstDayOfMonth = numberToPersian(dt.toLocale('fa').startOf('month').day());\n                const daysInMonth = dt.daysInMonth();\n    \n                dateString = {\n                    dayName: dayName,\n                    year: year,\n                    month: month,\n                    day: firstDayOfMonth\n                }\n                this.daysGone = this.days.indexOf(dateString.dayName);\n                \n                this.allCells = this.daysGone + daysInMonth;\n    \n                console.log(this.daysGone);\n            },\n        }"\n        x-init="load"\n        >\n          <div class="head"></div>\n    \n          **<template x-for="cell in allCells">\n            <template x-if="cell < 6">\n                <div class="day">1</div>\n            </template>\n            <template x-if="cell >= 6">\n                <div class="gone">2</div>\n            </template>\n          </template>**\n    \n          <div class="calendar" x-ref="calendar"></div>\n        </div>\n      </body>\n
Run Code Online (Sandbox Code Playgroud)\n

我尝试了很多方法并尝试将值传输到 x-data 但它也不起作用,抱歉我不喜欢 alpine js :(

\n

Dau*_*ros 5

模板标签只能包含一个根元素<div>,所以你需要用 a或其他东西包裹子元素:

<template x-for="cell in allCells">
   <div>
      <template x-if="cell < 6">
         <div class="day">1</div>
      </template>
      <template x-if="cell >= 6">
         <div class="gone">2</div>
      </template>
   <div>
</template>**
Run Code Online (Sandbox Code Playgroud)