vue模版

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Hreticent/article/details/87899879

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