zoukankan      html  css  js  c++  java
  • vuejs数据和事件

    <body>
      <div id='root'>{{number}}</div>
      <script>
        new Vue({
          el:'#root',
          data:{
            msg:'hello world',
            number:123
          }
        })
      </script>
    </body>
     
    数据写法
    {{number}} //这个语法我们把他叫做插值表达式,除了这种写法,还有两种写法
    <h1 v-text='number'></h1> //不编译html,引号内部是个变量
    <h1 v-html='number'></h1> //编译html
    事件
    <div id='root'>
      <div v-on:click="handleClick">{{content}}</div>
    </div>
    <script>
      new Vue({
        el:'#root',
        data:{
          content:'hello'
        },
        methods: {
          handleClick:function(){
            this.content = 'world';
          }
        }
      })
    </script>

    用指令v-on:click绑定,方法写在methods选项里面,在vue里面把hello变成world,之前要去改变dom,vuejs里面不用改变dom,直接改变数据就好了,this.content表示这个实例Vue里面data的content的数据

    v-on:click可以简写称@click
    <div @click="handleClick">{{content}}</div>



  • 相关阅读:
    python之名称空间
    python之对象(实例)
    python之类
    python之类和对象
    python之面向对象的程序设计
    python之函数联系
    Python之函数第三篇
    python之列表和生成器表达式篇
    网络基本概念
    Git
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9539954.html
Copyright © 2011-2022 走看看