vuejs v-model

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>vue</title>

     <!--

    <script src="vue.js"></script>

    -->

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

 <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>

</head>

<body> 

<div  id='vm01'>

<!--

<li  v-for="n in evenNumbers">{{n}}</li>

-->

<input @keyup.f1="submit"></input>

</div>

<div id="example-5" class="demo">

  <select v-model="selected">

    <option>A</option>

    <option>B</option>

    <option>C</option>

  </select>

  <span>Selected: {{ selected }}</span>

</div>

<div id="example-2">

  <simple-counter></simple-counter>

  <simple-counter></simple-counter>

  <simple-counter></simple-counter>

</div>

<script>

var data = { counter: 0 }

Vue.component('simple-counter', {

  template: '<button v-on:click="counter += 1">{{ counter }}</button>',

  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，

  // 但是我们返回给每个组件的实例的却引用了同一个data对象

  data: function () {

    return {counter:0}

  }

})

new Vue({

  el: '#example-2'

})

 new Vue({

  el: '#example-5',

  data: {

    selected: null

  }

})

var vm01= new Vue({

    el:"#vm01",

    data:{evenNumbers:[1,2,3,9,10]},

    methods: {

        submit: function(){

            alert(" use key 13 ");

        }

    }

    })

/*

var vm01= new Vue({

    el:"#vm01",

    data:{evenNumbers:[1,2,3,9,10]}

    })

*/

/*

var vm01= new Vue({

    el:"#vm01",

    data:{numbers:[1,2,3,9]},

    computed:

    {

        evenNumbers: function () {

        return this.numbers.filter(function (number) {

                //return number % 2 === 0

                return number 

           })

        }

    }

})

*/

</script>

</body>

</html>
巴特西

vuejs v-model

最新文章

热门文章
