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>



  • 相关阅读:
    csp2020游记
    agc006_f Blackout
    CF1368G Shifting Dominoes
    AtCoder Grand Contest 009 简要题解
    Codeforces Round #666 (Div. 1)
    CSP 2019 树的重心
    Luogu-P4859 已经没什么好害怕的了
    2020.9.17 校内测试
    CF379F New Year Tree
    图论(小结论)
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9539954.html
Copyright © 2011-2022 走看看