美文网首页
4、Vue事件绑定 定义方法 执行方法 获取数据 改变数据 执

4、Vue事件绑定 定义方法 执行方法 获取数据 改变数据 执

作者: msqt | 来源:发表于2019-03-02 14:10 被阅读0次


    <template>
    <div id="app">
    <h1>{{msg}}</h1>

    <img :src="src" alt=""/>

    <button v-on:click="fun1()">点击尝试方法一!</button>
    <button @click="fun2()">点击尝试方法二!</button>

    <button @click="getMsg()">点击尝试获取数据!</button>

    <button @click="setMsg()">点击尝试改变数据!</button>
    <button @click="Request()">点击请求数据</button>
    <ol>
    <li v-for="item in list">{{item}}</li>
    </ol>

    <button @click="parameIn(111)">点击进行方法传参</button>

    <button @click="eventIn2($event)">点击传入事件对象</button>
    <router-view/>
    </div>
    </template>

    <script>
    export default {
    name: 'App',
    data (){
    return{
    msg:'你好',
    src:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2476775726,1200843185&fm=27&gp=0.jpg',
    list:['111','222'],
    }
    },
    methods:{//用于放置自定义方法
    fun1(){
    alert('我是方法绑定的第一种方式!');
    },fun2(){
    alert('我是方法绑定的第二种方式!');
    },getMsg(){
    alert(this.msg);
    },setMsg(){
    this.msg='我是改编后的数据';
    },Request(){
    for(let i=0;i<5;i++){
    this.list.push('这是第'+i+"条数据");
    }
    },parameIn(val){
    this.msg=val;
    },eventIn2(e){
    console.log(e);
    // (e.srcElement表示获取当前事件的DOM节点)
    e.srcElement.style.color='red';
    }
    }
    }
    </script>

    <style>

    app {

    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    }
    .red{
    color:red;
    }
    .blue{
    color:blue;
    }
    .box{
    background: aqua;
    width: 100px;
    height: 100px;
    }
    </style>


    image.png

    相关文章

      网友评论

          本文标题:4、Vue事件绑定 定义方法 执行方法 获取数据 改变数据 执

          本文链接:https://www.haomeiwen.com/subject/hpveuqtx.html