<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>One</title>
<style>
.active {
color: red;
}
#app{
width: 800px;
margin: 100px auto;
}
ul>li>button {
background: rgba(0, 0, 0, 0);
border: none;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>
<label>
新闻标题:<input type="text" v-model="inputVal">
</label>
</p>
<p>
<label>
新闻地址:<input type="text" v-model="link">
</label>
</p>
<p>
新闻类别:<select v-model="selectVal">
<option v-for="(s_item,index) in box">{{s_item}}</option>
</select>
</p>
<p>
是否标红:
<label>
是<input type="radio" value="是" v-model="radioVal">
</label>
<label>
否<input type="radio" value="否" v-model="radioVal">
</label>
</p>
<button @click="handleAdd()">提交</button>
<hr>
<ul>
<li v-for="(item,index) in list" :key="item.id" >
<span>[{{item.select}}]</span>
<a :href="item.link" :class="{active:item.radio=='是'}">{{item.text}}</a>
<span class="time" v-once>{{getTime()}}</span>
<button @click="handleDel(index)">删除</button>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
inputVal: '',
link: "",
selectVal: "科技",
list: [],
radioVal: "是",
date: "new date",
box: ["科技", "娱乐", "体育", "财经"]
},
methods: {
handleAdd() {
var obj = {};
obj.text = this.inputVal;
obj.link = this.link;
obj.select = this.selectVal;
obj.radio = this.radioVal;
this.list.push(obj);
this.inputVal = "";
this.link = "";
this.selectVal = "科技";
this.radioVal = "是";
},
handleDel(index) {
this.list.splice(index, 1)
},
// 时间戳
getTime() {
let timeStr = "";
let date = new Date();
let y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate(),
h = date.getHours(),
i = date.getMinutes(),
s = date.getSeconds();
if (m < 10) { m = '0' + m; }
if (d < 10) { d = '0' + d; }
if (h < 10) { h = '0' + h; }
if (i < 10) { i = '0' + i; }
if (s < 10) { s = '0' + s; }
timeStr += y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return timeStr;
}
}
})
</script>
</body>
</html>