我有以下组件:
零件
<template>
<div>
<label class="typo__label">Single selecter</label>
<multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: '',
options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
}
}
}
</script>
我在我的页面中使用它是这样的:
<p id="app-two">
<dropdown></dropdown>
@{{ value }}
@{{ message }}
</p>
<script>
new Vue({
el: '#app',
data: {
message: 'Test message'
}
});
</script> …我有一个循环,每次迭代都会使margin-top减少182px.我想得到margin-top的值,所以我可以告诉它什么时候停止运行但是当我尝试在控制台中运行它时,它会返回"undefined"请告知如何更改它以获得真正的价值.
这是我正在使用的,我使用attr()因为它需要获得的值是内联样式:
$marginTop = $('.emp-wrap').attr("style");
其余代码如下
// if statements to move carousel up
$carouselNum = $('.carousella').length;
$marginTop = $('.emp-wrap').attr("style");
if($carouselNum > 1){
// // function empMove, the '-=' allows the -margin-top to run every time. Without this it will set the margin-top to the same value every loop
function empMove() { $('.emp-wrap').css('margin-top', '-=182')};
setInterval(empMove, 20000);
}
else if($carousel < 1){
// do something
}
else{
// do something
}
我刚刚安装了Jekyll,我正在追随几个问题.我知道您在根目录中的.md文件中定义了内容,并根据您选择的布局文件生成了html文件,但我没有得到的是如何分割您的内容{{ content }}.
比方说我想要一个来自我的.md文件的内容<article>和另一个内容我将<aside>如何进行此操作？有问题的代码粘贴在下面.谢谢
.md文件
---
layout: page
title: Page Test
permalink: /page-test/
bodyclass: page-test
---
Article content
* Hey this is my content!
Aside content
* Test links
布局文件
---
layout: default
---
<div class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title }}</h1>
</header>
<article class="post-content">
{{ content }}
</article>
<aside>
</aside>
</div>
我有以下代码,以使背景图像变暗.一个带有背景图像的div然后是一个div,里面用透明度填充背景颜色
<div class="slide">
<div class="slide-overlay">
<div class="slide-content">
<h1>Blah blah content</h1>
</div>
</div>
</div>
而且我这样造型
.slide
background-image: url('/assets/img/bg-cover.jpg')
background-size: cover
.slide-overlay
background-color: rgba(0, 0, 0, .2)
有谁知道更优雅的解决方案？
我想更改“链接”上的类的所有元素的类名。我正在使用一种通过元素上的单击操作调用的方法。我测试了从函数中获取长度，效果很好，但添加类却不行。有人知道为什么吗？
超文本标记语言
<div id="app">
<ul>
<li><a href="#" class="link" @click="myFunc">Link text 1</a></li>
<li><a href="#" class="link" @click="myFunc">Link text 2</a></li>
<li><a href="#" class="link" @click="myFunc">Link text 3</a></li>
</ul>
</div>
JS
var app = new Vue({
el: '#app',
methods: {
myFunc: function(event){
// works
var ElLength = document.getElementsByClassName('link').length;
console.log('ElLength = ' + ElLength);
// does not work
document.getElementsByClassName('link').className += " hullaballoo";
}
}
});
我有一个生成div的表单.我已经为每个div应用了一个基本ID,但我需要为它们添加数字以区分它们.
我已经阅读了Index并查看了其他示例,但是我无法让它在这里工作,当我把num变量放进去的时候似乎摇摇晃晃.无论如何我拿出了打破它的代码.
这是小提琴,http://jsfiddle.net/clintongreen/BMX4J/13/
谢谢
我正在学习Vuejs,我不断发现简单的事情,比如去除课堂是一种痛苦.请告诉我如何根据3个链接之间的点击添加或删除.active类.
在下面的示例中,添加工作正常,但它会将.active添加到所有链接,并且在再次单击时不会删除.
<div id="app">
<h2>App</h2>
<ul>
<li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
<li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
<li><a href="#" class="link" :class="{ active: isActive }" @click="activeLink">Link text</a></li>
</ul>
</div>
JS
var app = new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
activeLink() {
// the line below did not work
// document.getElementsByClassName("active").isActive = false,
this.isActive = true
}
}
})
JSfiddle在这里,https: //jsfiddle.net/s9r4q0gc/
我有一个页面，其中有两个 Vue 应用程序。我无法将它们组合起来，因为我的页面周围散布着 Google 广告，并且 Vue 不允许在实例中使用任何脚本标签。
我想要一种使用类似于props将数据从 App1 推送到 App2 的方法。
例如：用户在 App1 中填写输入，Vue 通过 v-model 保留数据并将该数据发送到 App2。
我想用它来过滤 App1 中输入的关键字并显示与 App2 中的这些关键字相对应的企业。
这可能吗？如果可以的话，Vue 有一个我可以使用的内置功能吗？
我希望有人解释为什么这在Vue中不起作用。
的HTML
<div id="app">
<button v-on:click="isActive = !isActive">Click me</button>
</div>
JS
vueApp = new Vue({
el: '#app',
data: {
isActive: false
}
});
预期的点击行为： Vue开发工具-数据：isActive等于true
实际点击行为：数据：Vue开发工具-isActive等于false
但这确实
的HTML
<div id="app">
<button v-on:click="isActive = !isActive">Click me</button>
<p v-bind:class="{ active : isActive }">Some text</p>
</div>
JS
vueApp = new Vue({
el: '#app',
data: {
isActive: false
}
});
预期的点击行为： Vue开发工具-数据：isActive等于true，并且p具有活动类。
实际点击行为： Vue开发工具-数据：isActive等于true，并且p具有活动类。
我的抱怨是，我希望Vue能够直接操作数据，而不是通过页面上的其他元素。
我正在尝试使用Vue JS向任务应用添加编辑功能.
@click="editShow"显示所有项目的编辑输入.我需要这个只显示相应的输入.@keyup.enter="editTask".由于某种原因,任务引用的是keyup事件而不是对象.我认为这是导致问题的原因.这是我到目前为止,https://jsfiddle.net/clintongreen/0p6bvd4j/
HTML
<div class="container" id="tasks">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
{{ message }}
</h3>
</div>
<ul class="list-group">
<li class="list-group-item clearfix" v-for="task in tasklist" >
<strong v-if="!editActive">{{ task.description }}</strong>
<input v-model="editTaskName" v-bind:placeholder="task.description" v-if="editActive" @keyup.enter="editTask" type="text" class="form-control input-height pull-left">
<div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed">
<button type="button" class="btn btn-default" @click="completeTask(task)">Complete</button>
<button type="button" @click="editShow" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default" @click="removeTask(task)">Remove</button>
</div>
<button class="btn btn-default btn-sm completed text-muted pull-right disabled …