Vue 간단 한 게시판 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style type="text/css">
body {
/* margin: 0; */
padding-left: 10px;
}
#app{
width: 400px;
height: auto;
}
.form-group {
margin-top: 10px;
}
.form-group textarea {
resize: none;
height: 144px;
width: 391px;
border-radius: 5px;
padding-left: 16px;
line-height: 16px;
padding-top: 10px;
font-size: 16px;
}
.content{
height: 244px;
width: 391px;
border-radius: 5px;
padding-left: 16px;
line-height: 10px;
padding-top: 10px;
font-size: 16px;
border:1px solid #ccc;
position: relative;
padding-right: 10px;
margin-bottom: 10px;
/* */
word-break:break-all;
word-wrap:break-word;
}
.p_img{
height: 60px;
width: 65px;
background-color: #ccc;
}
.p_img>img{
display: block;
height: 100%;
width: 100%;
}
.p_cont{
position: absolute;
top: 10px;
left: 85px;
line-height: 24px;
padding-right: 10px;
width: 300px;
height: auto;
background-color: #ccc;
}
.people{
position: absolute;
left: 13px;
top: 85px;
}
.timeDate{
position: absolute;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div id="app">
<form action="#" method="">
<div class="form-group">
<label for="usename"> :</label>
<input type="text" name="username" id="username" v-model="username" placeholder=" ">
</div>
<div class="form-group">
<p><label for="cont"> :</label></p>
<textarea v-model="cont" placeholder=" "></textarea>
</div>
<div class="form-group" style="text-align: center;">
<input type="button" value=" " @click="add">
<input type="reset" value=" " @click="remove()">
</div>
</form>
<div v-show="this.arr.length == 0"> </div>
<div class="content" v-for="item in arr">
<div class="p_img">
<img :src="imgUrl"></img>
</div>
<div class="people">
{{item.username}}
</div>
<div class="p_cont">
<span>{{item.cont}}</span>
</div>
<div class="timeDate">
{{item.timer | dataFormat}}
</div>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
//
Vue.filter('dataFormat', function(dataStr, pattern) {
// ，
console.log(dataStr)
var dt = new Date(dataStr)
var y = dt.getFullYear()
var m = dt.getMonth()
var d = dt.getDate()
// return `${y} - ${m} -${d}`
if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y} - ${m+1} -${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y} ${m+1} ${d} ${hh}:${mm}:${ss}`
}
})
var app = new Vue({
el: '#app',
data: {
username: '',
cont:'',
arr: [],
imgUrl:"./images/people.jpg",
// imgUrl:"http://wx2.sinaimg.cn/bmiddle/006WWRhNgy1gbn1bc3itdj31410u0q7y.jpg",
// index:0
ctime:new Date()
},
methods: {
add(){
this.arr.unshift({
username:this.username,
cont:this.cont,
timer:this.ctime
});
this.username = '';
this.cont = "";
this.timer = ""
},
remove(index){
this.arr.splice(index, 1);
}
}
});
</script>
</body>
</html>
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
