vue基础 - 实例中的数据，事件和方法 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue - demo</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="root">
    <!-- v-on:绑定事件，这里绑定了click事件 -->
    <div @click="headleClick">{{content}}</div>
    <!--几种打印方式-->
    <h1 v-html="content"></h1>
    <h1 v-text="content"></h1>
    <h1>{{msg}}</h1>
  </div>
  <script>
    new Vue({
      el:"#root",
      data:{
        content:"<h2>hello_content</h2>",
        msg:"hello_msg"
      },
      methods:{
        headleClick:function(){
          this.content = "world"//点击改变文本内容，一定要写在methods方法里
        }
      }
    })
  </script>
</body>
</html>

 

posted @ 2019-01-16 16:16  wong。  阅读(237)  评论(0)    收藏  举报