master

分支 (1)

管理

管理

master

learnjs
/
vue-2.html

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE Demo</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>

<div id="app">
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ study }}</p>
    <p>
      <button v-on:click="reverseName">反转名字</button>
    </p>
    <p>
    <button v-on:click="changeName">改变对象</button>
    </p>
    <p>
    <button v-on:click="initObj">恢复对象</button>
    </p>
    <p>
    <button v-on:click="name = 'baz'">改变mydata name</button>
    </p>

</div>

<script>
mydata = {
          name: 'zhangsan',
          age: 25,
          study: 'vue'
          }
vm = new Vue({
    el: '#app',
    data: mydata,
    created: function () {
      // `this` 指向 vm 实例
      console.log('after created name is: ' + this.name)
    },
    methods: {
        initObj: function() {
            this.name = 'zhangsan',
            this.age = 25;
            this.study = 'vue';
        },
        reverseName: function () {
          this.name = this.name.split('').reverse().join('');
        },
        changeName: function () {
          this.name = 'lisi';
          this.age = 36;
          this.study = 'javascript';
        }
    }

})


</script>

</body>
</html>