大家下午好！我正在使用 vue.js 并想澄清一下。我有这个文件结构：
views
-index
-about
-todos
每个文件都有自己的脚本，定义如下：
<script>
export default { ... }
</script>
是否会同时在主页（索引）上加载所有脚本？或者在 vue 中，它已经意味着只加载主页的脚本。
而如果所有的脚本都被加载了（至少在查看页面代码时，它们都被加载了），那么如何解决这个问题呢？
有两个输入实现为选择。如果我们单击第一个块，然后单击第二个，那么第一个应该关闭。它们具有相同的类。
$(this).on('click', function(e) {
if (!$(e.target).closest(".container-input-select").find('.input-as-select').length) {
$(this).find('.input-as-select-border-active').addClass('input-as-select-transform');
}
e.stopPropagation();
});
我有几个这样的 div 具有相同的类。只有当我们在区域外单击时输入才会折叠，当我们单击第二个输入时，由于它们具有相同的类，因此第一个不会隐藏。
<div class="container-input-select">
<div class="input-as-select">
<input type="text" readonly>
<div class="points-to-select-input uk-hidden">
<ul class="uk-list">
<li>+7-909-000-00-00</li>
<li>+7-954-645-65-43</li>
<li>Другое</li>
</ul>
</div>
</div>
</div>
我有以下选择：
<div>
<select>
<option value="">Пункт 1</option>
<option value="">Пункт 2</option>
<option value="">Другое</option>
</select>
</div>
您需要实现以下功能：即 当您选择“其他”时，选择中的文本应该会消失，您应该能够从键盘输入信息。但！同时，select 应该仍然具有选择其他项的能力。这样的机制可行吗？如果是这样，你从哪里开始？...
scss 中的哪个条目将等同于 css 中的这个条目？
input[type=checkbox]:checked + label:before {
color: #000;
}
我有 2 个按钮，它们在伪类（图像图标）之后都有相同的。在 JQuery 的帮助下，单击按钮时我会旋转此图标。但问题是两个按钮的图标被旋转了......我怎样才能只让按下的按钮的特定图标旋转？
$($btn).click(function() {
$('.personal-account-tables table').toggleClass('border-bottom-table');
$('.personal-account-tables tr th button:first-child').after(function(){
$(this).toggleClass('rotate-block');
});
});
这是按钮
<button class="uk-width-1-6@m btn-tariff-select btn-show-tariff-table" type="button">Сравнить тарифы</button>
<button class="uk-width-1-6@m btn-tariff-select btn-show-tariff-table" type="button">Сравнить тарифы</button>
这是按钮内图像的样式
button {
margin-top: 15px;
font-weight: normal;
&:after {
display: inline-block;
padding: 0 0 0 15px;
content: url('../lk-arrow.svg');
transition: all 0.1s ease-in-out;
}
&.rotate-block:after {
padding: 0 15px 0 0;
transform: rotate(180deg);
}
&:hover:after {
content: url('../lk-arrow-white.svg');
}
}
<div class="progress-bar-item-with-text">
<p>Количество сделок продажа</p>
<div class="progress-bar-item uk-margin-right">
<div class="progress-bar-activity" style="width: 10%">
</div>
</div>
<div class="uk-margin-remove-left uk-child-width-1-2@m" uk-grid>
<span class="progress-bar-text-down uk-text-right">1</span>
<span class="progress-bar-text-down uk-text-right"><b>1.2</b></span>
</div>
</div>
我有6块积木，每块叫法都一样，只是标签里的值不 <b>1.2</b>一样。如何使当 b 标记中的值 > 1 到该行时
<div class="progress-bar-activity" style="width: 10%"></div>
添加了一个类，当b标签中的值<1时，又添加了一个类？
我这样做：
$(document).ready(function() {
if (parseFloat($('.progress-bar-item-with-text .progress-bar-text-down b').text()) > 1) {
$('.progress-bar-item-with-text .progress-bar-item .progress-bar-activity').addClass("progress-bar-activity-more");
}
else {
$('.progress-bar-item-with-text .progress-bar-item .progress-bar-activity').addClass("progress-bar-activity-less");
}
});
但是，事实证明，一个类被添加到所有类中<div class="progress-bar-activity" style="width: 10%"></div>
这里有张桌子
<table>
<thead>
<th><button class="btn-show-catalog-table">Сравнить тарифы каталога отрасли</button></th>
<th>Какой-то текст</th>
<th>Какой-то текст</th>
</thead>
<tbody>
<tr>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
</tr>
<div class="show-catalog-table">
<tr>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
</tr>
<tr>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
</tr>
<tr>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
</tr>
<tr>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
<td>Какой-то текст</td>
</tr>
</div>
</tbody>
</table>
我写了以下代码：
function toggleCatalogBlock($btn, $block) {
$($btn).click(function() {
$($block).slideToggle("slow");
});
};
$(document).ready(function() {
toggleCatalogBlock(".btn-show-catalog-table", ".show-catalog-table");
});
但它不适用于列......我怎样才能让它们平滑地隐藏在高度中？
vue.js怎么做：有一个按钮，有一个表格，需要点击按钮时，表格高度平滑隐藏，再次点击时，高度平滑出现。
.show-catalog-enter-active {
transition: all 1s;
}
.show-catalog-leave-active {
transition: all 1s;
}
.show-catalog-enter {
height: 0;
}
.show-catalog-leave-to {
height: 0;
}
当以平滑的消失和外观包裹桌子时<transition>，没有。一秒钟后，该块简单地消失并相应地出现。
如何使“buyingSelling”、“buyingSellingRent”、“rent”数组动态插入到代码中（见下面的html文档）
var showTreeCheckbox = new Vue({
el: '#tree-checkbox',
data: {
showActivity: false,
buyingSelling: [],
buyingSellingRent: [],
rent: [],
checkItems: [
{
key: 'Покупка-Продажа',
value: ['Жилой недвижимости', 'Коммерческой недвижимости', 'Земельных участков']
},
{
key: 'Покупка-Продажа-Аренда',
value: ['Приносящей доход недвижимости (Бизнеса)']
},
{
key: 'Аренда',
value: ['Жилой недвижимости','Коммерческой недвижимости']
}
]
}
})
<div id="tree-checkbox">
<div class="check1">
<input type="checkbox" id="ch1" v-model="showActivity">
<label for="ch1"><span>Посредник</span></label>
</div>
<div class="types-activity" v-if="showActivity">
<h3>Виды и направления деятельности:</h3>
<label>
<input type="checkbox" value="realtorServices">
<span>Риелторские услуги</span>
</label>
<div class="checkbox-tree-items">
<ul>
<li v-for="(checkItem,index) in checkItems">
<label>
<input type="checkbox" :value="checkItem.value" >
<span>{{ checkItem.key }}</span>
</label>
<ul>
<li v-for="(subItem,index2) in checkItem.value">
<label>
<input type="checkbox" :value="checkItem.value[index2]+index">
<span>{{ subItem }}</span>
<span>{{ }}</span>
</label>
</li>
</ul>
</li>
</ul>
</div><!-- checkbox-tree-items -->
</div><!-- types-activity -->
</div>
此处需要替换模型：<input type="checkbox" :value="checkItem.value[index2]+index">
为了使选中的复选框进入它们的数组。
有这样一个问题，有一个树复选框 - s （假设有 3 个）。您需要这样做，以便当您单击一个复选框时，其他两个也有一个复选标记（也就是说，它也被选中）并且当您从父级删除这两个复选框时，复选标记被删除。
我正在尝试在 vue js 上创建一个“锚点”，但没有任何反应 1）导航菜单本身位于一个标题类 2）接下来是 4 个块（其中一个在主类中，其余在 div ) 您需要确保当您从导航菜单中单击链接时，可以平滑滚动到该块。我这样做： ... <li><button type="button" @click="scrollTo('services')">Услуги</button></li> ... 挑战 ... ...
代码
var anchor = new Vue({
methods: {
scrollTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
})
我点击链接 - 它不起作用。更不用说平滑滚动
PS 另外，当屏幕在活动块上时，您需要使链接更改颜色