主页 / user-332984

Lyy's questions

Martin Hope
Lyy
Asked: 2020-07-24 22:42:25 +0000 UTC
  • 0

fullName请解释为什么单击按钮时调用该方法？

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false;
Vue.config.devtools = false;

let sample = new Vue({
  el: '.sample',
  data: {
    firstName: '',
    lastName: '',
    showText: false
  },
  methods: {
    fullName() {
      console.log('render fullname');
      return this.firstName + ' ' + this.lastName;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="wrapper">
  <div class="sample">
    <input type="text" v-model="firstName">
    <hr>
    <input type="text" v-model="lastName">
    <hr>
    <h2>Hello, {{ fullName() }}</h2>
    <hr>
    <button class="btn btn-success" @click="showText = !showText">
      ToggleText
    </button>
    <hr>
    <div v-show="showText">Some text</div>
  </div>
</div>

https://codepen.io/anon/pen/voGPNq?editors=1010

我知道你需要将这个方法推入属性computed中，但我不明白它为什么以及如何工作，因为我不明白为什么fullName在属性中调用该方法methods。

当您单击按钮时，是重新绘制sample带有子元素的整体还是什么？

vue.js
Martin Hope
Lyy
Asked: 2020-07-05 04:37:58 +0000 UTC
  • 1

考虑到块的宽度是橡胶，高度是固定的，将如何进行转移以及在条件下写什么？

我想出了一个小项目，只是为了学习不同的东西，但在这一点上卡住了。请给出它应该如何工作的想法或建议阅读/查看该主题的内容？！

在此处输入图像描述 

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 3px solid #757575;
  width: 80%;
  height: 300px;

  list-style: none;
}

.list__item {
  border: 1px solid #bdbdbd;
  margin: 10px;
  min-width: 80px;
  text-align: center;
}

.btn {
  border: none;
  background-color: transparent;
  font-size: 90px;
  cursor: pointer;
  outline: none;
  color: #bdbdbd;
}
<body>
    <div class="container">
      <button class="btn">◀</button>
      <ul class="list">
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
      </ul>
      <button class="btn">▶</button>
    </div>
  </body>

javascript
Martin Hope
Lyy
Asked: 2020-06-16 21:01:18 +0000 UTC
  • 1

function easyHTTP() {
  this.http = new XMLHttpRequest();
}

easyHTTP.prototype.get = function(url) {
  this.http.open('GET', url, true);

  let self = this;
  this.http.onload = function() {
    if(self.http.status === 200) {
      return self.http.responseText;
    } 
  };

  this.http.send();
};

const http = new easyHTTP;

console.log(http.get('https://jsonplaceholder.typicode.com/posts/1'));

为什么return self.http.responseText它返回未定义？

为什么如果你这样做在同一行是这样的：

  • console.log(self.http.responseText)

或像这样：

  • callback(self.http.responseText)

  • http.get('https://jsonplaceholder.typicode.com/posts', function(posts) { console.log(posts); });

那么答案是否正常显示？

javascript
Martin Hope
Lyy
Asked: 2020-06-07 15:55:14 +0000 UTC
  • 1

最后一项任务来自这里：https ://learn.javascript.ru/closures-usage 。作者对解决方案的评论完全让我感到困惑。这里有人可以帮我整理一下我的想法吗？

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {

    var shooter = function(x) {

      return function() {
        console.log( x );
      };

    }(i);

    shooters.push(shooter);
  }

  return shooters;
}

var army = makeArmy();

army[0]();
army[5]();

这个特定的时刻并不清楚：

  var shooter = function(x) {

    return function() {
      console.log( x );
    };

  }(i);

这个函数调用了什么函数，它(i)从哪里 x作为参数传递？

javascript
Martin Hope
Lyy
Asked: 2020-06-02 03:43:46 +0000 UTC
  • 1

有以下代码：

function startAnimation() {
    var box = document.querySelector('.box');
    var boxPosition = box.getBoundingClientRect().top;
    var screenPosition = window.innerHeight / 1.2;

    if(boxPosition < screenPosition) {
        box.classList.add('animation');
    }
}

window.addEventListener('scroll', startAnimation);
@keyframes rotate {
    100% {
        transform: rotate(180deg);
    }
}

.box.animation {
    animation: rotate 1s ease-in 0.1s;
    animation-fill-mode: forwards;
}

.container {
  background-color: #03A9F4;
  height: 2000px;
} 

.box-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 490px;
  border: 5px solid #FFEB3B;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #8BC34A;
  border: 5px solid #4CAF50;
}
<div class="container">
  <div class="box-wrapper">
    
  </div>
  <div class="box-wrapper">
    <div class="box"></div>
  </div> 
  <div class="box-wrapper">
    <div class="box"></div>
  </div>
  <div class="box-wrapper">
    <div class="box"></div>
  </div> 
</div>

你能告诉我如何让每个 .box 出现在屏幕上时旋转吗？我知道所有 .box 都需要放入一个数组中，但我不知道接下来要对数组做什么......

javascript
Martin Hope
Lyy
Asked: 2020-04-06 03:48:25 +0000 UTC
  • 5

例如，有这个 svg：

<svg xmlns="http://www.w3.org/2000/svg" width="26" height="15" viewBox="0 0 26 15"><path fill="#FFF" d="M16.138 11.51c.956-.309 2.18 2.04 3.483 2.939.978.681 1.727.534 1.727.534l3.473-.05s1.815-.112.957-1.554c-.071-.12-.503-1.069-2.585-3.022-2.177-2.043-1.882-1.712.739-5.244 1.597-2.153 2.236-3.468 2.036-4.028-.192-.539-1.365-.399-1.365-.399L20.69.713c-.381.001-.704.119-.851.515-.003.004-.621 1.666-1.445 3.079-1.741 2.989-2.436 3.148-2.724 2.961-.661-.433-.494-1.737-.494-2.664 0-2.897.432-4.105-.846-4.417-.427-.104-.739-.172-1.828-.182-1.392-.021-2.574 0-3.244.329-.445.223-.786.712-.579.74.26.035.843.16 1.155.586.401.552.389 1.789.389 1.789s.229 3.411-.54 3.834c-.528.29-1.25-.302-2.803-3.016-.793-1.388-1.392-2.922-1.392-2.922s-.116-.285-.326-.441c-.25-.185-.6-.244-.6-.244L.848.684S.29.7.085.946c-.182.218-.015.668-.015.668s2.909 6.881 6.203 10.347c3.02 3.182 6.452 2.971 6.452 2.971h1.555s.469-.054.709-.312c.224-.24.214-.691.214-.691s-.031-2.109.935-2.419z"/></svg>

当悬停图标需要更改颜色时，最好的做法是什么？插入一堵代码墙，将其描述为一个普通的html元素，或者，比如在后台设置一些不同状态的span到不同的svg？或者还有其他方法吗？

html