<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg1 }}</h1>
<h2>{{obj.name}}</h2>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<ol>
<li v-for="(item,index) in list1" :key="index">{{item.title}}</li>
</ol>
<ol>
<li v-for="(item,index) in list2" :key="index">
{{item.cate}}
<ol>
<li v-for="(news,child_index) in item.list" :key="child_index">{{news.title}}</li>
</ol>
</li>
</ol>
<h1>{{ msg2 }}</h1>
<div v-bind:title="title">这是一个title,用鼠标喵上去看一下</div>
<img src="https://static1.bcjiaoyu.com/game/fi_sand.png" />
<img v-bind:src="url" />
<img :src="url" />
<br />
{{h}}
<div v-html="h"></div>
<div v-text="msg"></div>
<div v-bind:class="{'red':!flag}">
{{msg}}
</div>
<div :class="{'red':flag,'blue':!flag}">
{{msg}}
</div>
<ol>
<li v-for="(item,index) in list1" :key="index" :class="{'red':index==0, 'blue':index==1}">{{item.title}}</li>
</ol>
<div class="box" v-bind:style="{width:boxWidth+'px'}">我是一个box</div>
<br/>
<input type="text" v-model="msg3" placeholder="edit me"/>
<button v-on:click="getMsg()">获取表单数据</button>
<button v-on:click="setMsg()">设置表单数据</button>
<hr>
<br/>
<input type="text" ref="userInfo"/>
<div ref="box">我是一个box
<ul>
<li v-for="(item,index) in newList" :key="index">
{{item}}
</li>
</ul>
</div>
<button @click="getInputValue()">获取第二个表单的数据</button>
<button @click="requestData()">添加数据</button>
<br/>
<br/>
<button @click="deleteData('111')">执行方法传值</button>
<br/>
<br/>
<button data-aid="123" @click="eventFn($event)">事件对象</button>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
msg: '你好 VUE,绑定数据的另一种方法',
msg1: 'vue绑定数据,绑定对象,循环数据渲染数据',
obj: {
name: '章三'
},
list: ['111', '222', '333'],
list1: [
{ 'title': '1111' },
{ 'title': '2222' },
{ 'title': '3333' },
],
list2: [
{
cate: "中国新闻",
list: [
{ 'title': '中国新闻1111' },
{ 'title': '中国新闻2222' },
{ 'title': '中国新闻3333' },
]
},
{
cate: "国际新闻",
list: [
{ 'title': '国际新闻1111' },
{ 'title': '国际新闻2222' },
{ 'title': '国际新闻3333' },
]
}
],
msg2: 'vue绑定属性,绑定html,绑定Class,绑定Style',
title: '我是title',
url: 'https://static1.bcjiaoyu.com/game/fi_sand.png',
h: '<h3>我是h3标签</h3>',
flag:false,
boxWidth:500,
msg3:'vue双向数据绑定',
newList:[],
}
},
methods:{
getMsg:function(){
alert(this.msg3);
},
setMsg:function(){
this.msg3="我是改变后的msg3"
},
// 方法es6
getInputValue(){
console.log(this.$refs.userInfo);
alert(this.$refs.userInfo.value);
this.$refs.box.style.backgroundColor="pink";
},
requestData(){
for(var i=0;i<10;i++){
this.newList.push('我是第'+i+'个数据');
}
},
deleteData(val){
alert(val)
},
eventFn(e){
console.log(e);
e.srcElement.style.background="red";
console.log(e.srcElement.dataset);
console.log(e.srcElement.dataset.aid);
}
}
}
</script>
<style lang="scss">
.red{
color:red;
}
.blue{
color:blue;
}
.box{
width:100px;
height:100px;
background-color:green;
}
</style>