RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-369754

slobodianiukvitali's questions

Martin Hope
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>

vue.js
  • 2 个回答
  • 10 Views
Martin Hope
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>

vue.js
  • 1 个回答
  • 10 Views
Martin Hope
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> 

vue.js
  • 1 个回答
  • 10 Views
Martin Hope
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>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
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>

vue.js
  • 1 个回答
  • 10 Views
Martin Hope
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>

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

提前致谢)

javascript
  • 1 个回答
  • 10 Views
Martin Hope
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>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
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>

vue.js
  • 1 个回答
  • 10 Views
Martin Hope
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

javascript
  • 5 个回答
  • 10 Views
Martin Hope
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

css
  • 1 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

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

    • 3 个回答
  • Marko Smith

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

    • 5 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 2 个回答
  • Marko Smith

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

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5