vue入门实例一,常用语法

‘用 new Vue({})新建vue实例’,
‘使用 v-bind:和{{}}双大括号语法在html中绑定变量’,
‘使用 v-on: 和 @ 语法绑定函数到标签的事件’,
‘使用 v-model: 语法使用户的页面输入反向传递回vue实例变量’,
‘全用 v-if: 显示与隐藏’

<div id="firstVue">
    <div>
      <ul>
        <li v-for="item in my_todo">{{ item }}</li>
      </ul>
    </div>
    <input type="text" v-model="my_data" />
    <button @click="clickButton">重新赋值-清零</button>
    <button @click="clickShow">显示</button>
    <button @click="clickHidden">隐藏</button>
    <p v-if="isShow">用户输入的是:{{ my_data }}</p>
  </div>
var myVue = new Vue({
      el: '#firstVue',
      data: {
        my_todo: [
        '用 new Vue({})新建vue实例',
        '使用 v-bind:和{{}}双大括号语法在html中绑定变量',
        '使用 v-on: 和 @ 语法绑定函数到标签的事件',
        '使用 v-model: 语法使用户的页面输入反向传递回vue实例变量',
        '全用 v-if: 显示与隐藏'
        ],
        my_data: "Wow! I'm text",
        isShow: true
      },
      methods: {
        clickButton: function () {
          // 清零
          this.my_data = ""
        },
        clickShow: function () {
          // Show
          this.isShow = true
        },
        clickHidden: function () {
          // Hidden
          this.isShow = false
        }
      }
    })

最终效果:

482 total views, 4 views today

Revisions

No comments yet.

发表评论