slobodianiukvitali提出的问题

slobodianiukvitali

Asked: 2020-04-12 20:27:35 +0000 UTC

通过单击删除块

1

告诉我我在这里做了什么。我的任务是显示块，当我点击按钮时，我删除了这个块。谢谢

new Vue({
	el: '#app',
	data: {
		desks:[]
	},
	methods: {
		deleteDesk(desk) {
			this.desks.splice(desk, 1);
		}
	}
})

<div id="app" >
	<div id="box" v-for="desk in desks">
		<button @click="deleteDesk(desk)">Delete</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eligendi excepturi, modi saepe praesentium consequatur accusantium facilis ipsa eius magnam! Libero sunt quidem commodi nobis itaque earum nemo a, hic.</p>
	</div>
	<div id="box" v-for="desk in desks">
		<button @click="deleteDesk(desk)">Delete</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum id saepe qui aut fugit, aperiam inventore libero perspiciatis a ab? Repellendus, quo nam harum quos odio non praesentium voluptates deleniti.</p>
	</div>
	<div id="box" v-for="desk in desks">
		<button @click="deleteDesk(desk)">Delete</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vero voluptates delectus architecto cumque dolorem nam qui inventore est, quos eius odit similique ab corporis, ullam ipsa odio dolores consequuntur.</p>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

slobodianiukvitali

Asked: 2020-04-02 00:58:43 +0000 UTC

解决模板中括号的问题？

1

我创建了一个单独的组件。div标签的问题在于有括号的地方，这是组件不喜欢的地方，即模板。即问题出在模板中：

Vue.component('data-tag', {
		data() {
			return {
				dataend: '',
				days: ''
			}
		},
		template: `
		<div>
			<input type="date" placeholder="дата окончания" v-model="dataend">
			<div> {{days}} days</div>
			<div :class="`tab ${сolorTag}`"></div>
		</div>
		`,
		watch: {
			dataend(){
				this.deadline();
			}
		},
		methods: {
			deadline() {
				const msPerDay = 8.64 * Math.pow(10, 7);
				const abs = Date.parse(this.dataend) - Date.now();
				this.days = Math.ceil(abs/msPerDay);
			}
		},
		computed: {
			сolorTag() {
		        switch(true) {
		            case this.days > 60: {
		              return 'blue'
		            }
		            case this.days < 60 && this.days>14: {
		              return 'yellow'
		            }
		            case this.days < 14: {
		              return 'red'
		            }
		        }
			}
		}
	});
	new Vue({
		el: "#data-tag"		
	})

.tab {
width: 140px;
height: 80px;
background-color: #eee;
}
.red {background-color: red;}
.yellow {background-color: yellow;}
.blue {background-color: blue;}

<div id="data-tag">
<data-tag></data-tag>
</div>

slobodianiukvitali

Asked: 2020-03-31 03:54:31 +0000 UTC

将数据推入二维数组？

1

如何正确地将（姓名、主题、日期）推送到 studentIndex：[] 谢谢！）

new Vue({
		el: "#data-tag",
		data: {
			dataend: '',
			days: '',
			studentIndex: [
				{nameStudentIndex:"", topicStudentIndex: "", days: ""},
			]
		},
		watch: {
			dataend(){
				this.deadline();
			}
		},
		methods: {
			deadline() {
				const msPerDay = 8.64 * Math.pow(10, 7);
				const abs = Date.parse(this.dataend) - Date.now();
				this.days = Math.ceil(abs/msPerDay);
			},
			addtoList() {
				studentIndex.push(this.nameStudentIndex, this.topicStudentIndex, this.days);
				console.log(studentIndex);
			}

		},
		computed: {
			сolorTag() {
       		switch(true) {
            case this.days > 60: {
              return 'blue'
            }
            case this.days < 60 && this.days>14: {
              return 'yellow'
            }
            case this.days < 14: {
              return 'red'
            }
            }
			}
		}	
	})

tab {
			width: 140px;
			height: 80px;
			
		}
		.red {background-color: red;}
		.yellow {background-color: yellow;}
		.blue {background-color: blue;}
		#rezult {
			background-color: #eee;
		}

<div id="data-tag">
	<input type="text" placeholder="name" v-model="nameStudentIndex">
	<input type="text" placeholder="topic" v-model="topicStudentIndex">
	<input type="date" placeholder="дата окончания" v-model="dataend">
	<button @click="addtoList">Add</button>
	

	<div id="rezult" v-for="studentIndexes in studentIndex">
		<div>{{studentIndexes.nameStudentIndex}}</div>
		<div>{{studentIndexes.nameStudentIndex}}</div>
		<div> {{studentIndexes.days}} days</div>
		<div :class="`tab ${сolorTag}`"></div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

slobodianiukvitali

Asked: 2020-03-26 18:35:19 +0000 UTC

计算从今天到您选择的日期的天数？

0

我想问一下我的编码方法中的错误是什么（但我在控制台中没有看到错误）。我的任务是，即：计算从今天到我选择的日期的天数

var data1=new Date();
	new Vue({
		el: "#data-tag",
		data: {
			dataend: " ",
			datastart: " ",
			deadline: " ",
			milliseconds: "",
			seconds: "",
			minutes: "",
			hours: "",
			days: ""
		},
		methods: {
			Deadline() {
				this.datastart= new Date();
				this.deadline=Math.abs(this.dataend-this.datastart);

				this.milliseconds = this.deadline;
				this.seconds = this.milliseconds / 1000;
				this.minutes = this.seconds / 60;
				this.hours = this.minutes / 60;
				this.days = this.hours / 24;
				this.days=Math.ceil(days);
				console.log(this.days);
			}
		}
	})

<div id="data-tag">
		<input type="date" placeholder="дата окончания" v-model="dataend">
		<div> {{days}}</div>
	</div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

slobodianiukvitali

Asked: 2020-03-25 17:41:35 +0000 UTC

如何完成切换并单击组？

0

在键和项目之间切换单击

const ChooseListStudents = new Vue({
		el: '#chooseListStudents',
		data: {
			groups: [
				{1: ['Ivanov', 'Mac', 'Orehov']},
				{2: ['Shobdra', 'Rimar', 'Haguev']},
				{3: ['Slobodinaiuk', 'Shelepko', 'Androshuk']}
			],
			listStudent: [],
			showlistSt: false,
			addSt: true,
			itemstudent: false
		},
		methods: {
			addStudent(item) {
				this.listStudent.push(item);
			},
			ShowAllGroups() {
				this.showlistSt= true
				this.addSt= false
			},
			showStudent() {
				this.itemstudent=true
			}

		}
	})

<div id="chooseListStudents">
	<div v-for="(group, idx) in groups" :key="idx" v-show="showlistSt"> 
		<div v-for="(sub, key) in group" :key="key">
			<h3 @click="showStudent(this)"> Group {{ key }}</h3>
			<div v-for="(item, i) in sub" :key="i" @click="addStudent(item)" v-show="itemstudent">{{ item }}</div>
		</div>
	</div>

	<p>List students!</p>
	<button @click="ShowAllGroups()" v-show="addSt">Add</button>
	<div>
		<div v-for="student in listStudent">{{ student }}</div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

slobodianiukvitali

Asked: 2020-03-25 04:17:49 +0000 UTC

单击时将元素从二维数组添加到另一个数组，Vue.js

1

new Vue({
  el: '#app',
  data: {
    groups: [{
        first: ['a', 'b', 'c']
      },
      {
        second: ['z', 'x', 'c']
      },
      {
        third: ['1', '2', '3']
      }
    ],
    listStudent: []
  },
  methods: {
    addStudent(item) {
      item = this.item;
      listStudent.push(item);
    }
  }
})

<div id="app">
  <ul v-for="group in groups">
    <li v-for="item in group" @click="addStudent(item)">{{item}}</li>
  </ul>
  <p>List students</p>
  <ul>
    <li v-for="student in listStudent">{{ student }}</li>
  </ul>
</div>

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

需要在html中显示二维数组的元素。
单击一个元素 - 将其添加到另一个数组。

提前致谢）

slobodianiukvitali

Asked: 2020-03-09 23:22:43 +0000 UTC

创建组件

1

我想创建一个组件再次调用它组件不起作用（（

Vue.component('v-app', {
		template: `
		<div class="show-modal" v-show="itemPost" >
			<h1>Item-Post</h1>
			{{ item.userId }} <br>
			{{ item.id }} <br>
			{{ item.title }} <br>
			{{ item.body }} <br>
		</div>
		`
	});
	let semple=new Vue({
		el: '#app',
		data: {
		    userId: '',
		    id: '',
		    title: '',
		    body: '',
		    posts: null,

		    item: '',
		    itemPost: false
		},
		methods: {
		Puslished(){
				this.posts.push({
					userId:this.userId, 
					id:this.id,
					title:this.title,
					body:this.body
				});
			},
		clickBookModal(i) {
				this.itemPost = true;
				this.item = this.posts[i]
			},
		DeleteItemPost(i) { 
				this.posts.splice(i, 1);
			}
		},
		mounted() {
			axios.get('https://jsonplaceholder.typicode.com/posts')
			.then(response => this.posts=response.data);
		}
	})

.post-wrapper ul{
	margin: 5px;
	width: 120px;
	border: 2px solid orange;
}

.post-wrapper {
	display: flex;
	flex-wrap: wrap;
}

<div id="app">

	<input type="text" placeholder="userId" v-model="userId">
	<input type="text" placeholder="id" v-model="id">
	<input type="text" placeholder="title" v-model="title">
	<input type="text" placeholder="body" v-model="body">
	<div v-show="userId"><b>UserId</b> -{{ userId }}</div>
	<div v-show="id"><b>Id</b> -{{ id }}</div>
	<div v-show="title"><b>Title</b> -{{ title }}</div>
	<div v-show="body"><b>Body</b> -{{ body }}</div>

	<button @click="Puslished">Push in Posts</button>
	

	<!-- SHOW ON CLICK ITEM -->
	<v-app></v-app>
	
	<!-- show -->

	<div class="post-wrapper">
		<ul v-for="(post, i) in posts" class="box" @click="clickBookModal(i)">
			<li  v-html="post.userId" class="user-id"></li>
			<li  v-html="post.id" class="post-id"></li>
			<li  v-html="post.title" class="post-title"></li>
			<li  v-html="post.body" class="post-body"></li>
			<button @click="DeleteItemPost(i)">Delete!</button>
		</ul>
	</div>
</div>


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

slobodianiukvitali

Asked: 2020-02-21 05:59:56 +0000 UTC

通过输入创建对象并在页面上显示该对象

1

通过输入创建对象并在页面上显示

<div class="form-group">
    <label for="userId">userId</label>
    <input type="text" id="userId" v-model.trim="userId">
  </div>
  <div class="form-group">
    <label for="id">id</label>
    <input type="text" id="id" v-model.number="id">
  </div>
  <div class="form-group">
    <label for="title">title</label>
    <input type="text" id="title" v-model.number="title">
  </div>
  <div class="form-group">
    <label for="body">body</label>
    <input type="text" id="body" v-model.number="body">
  </div>

  <button @click="create">Create</button>
  <ul>
    <li></li>
  </ul>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

slobodianiukvitali

Asked: 2020-02-20 03:16:00 +0000 UTC

显示更多按钮

4

有 100 个带有块的元素。
有必要在页面上显示前 10 个块。
当您再次单击该按钮时，显示接下来的 10 个块。

var box = document.querySelectorAll('.box');
var btn = document.getElementsByTagName('button');
console.log(box);

btn = addEventListener("click", function() {
  box.slice(0, 9);

})

.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 100%;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Show 10</button>

https://codepen.io/vitalikdark/pen/vYOXNvW

slobodianiukvitali

Asked: 2020-02-07 01:18:05 +0000 UTC

响应式背景图片？

-2

如何为网站写出这样的背景（自适应）

https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html

通过单击删除块

解决模板中括号的问题？

将数据推入二维数组？

计算从今天到您选择的日期的天数？

如何完成切换并单击组？

单击时将元素从二维数组添加到另一个数组，Vue.js

创建组件

通过输入创建对象并在页面上显示该对象

显示更多按钮

响应式背景图片？

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

slobodianiukvitali's questions