Vue 經常使用方法一

時間 2019-11-22

標籤 vue 經常使用方法简体版

原文原文鏈接

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

<div id="app">
{{ message }}

</div>

<div id="app2">
<span :title="message">11111111</span>
</div>

<div id="app3">

<span v-if="screen"> hi</span>
</div>


<div id="app4">

<ol>
<li v-for="todo in todos">{{ todo.text}}</li>

</ol>

</div>


<div id="app5">
{{ message }}


<button v-on:click="revermessage">click</button>

</div>

<div id="app6">
{{ message }}

<input v-model="message" value="hello 12321">
</div>


</body>

<script>
var app=new Vue({

  el:"#app",
  data:{
    message:"hello Vue!"
  }

})
var app2=new Vue({
  el:"#app2",
  data:{
    message:"頁面家在於"+new Date().toLocaleString()
  }
})

var app3=new Vue({
   el:"#app3",
   data:{
     screen:false
   }

})
var arr=[{"text":"111"},{"text":"2222"}];
var app4=new Vue({
   el:"#app4",
   data:{todos:arr}

})

var app5=new Vue({
   el:"#app5",
   data:{
     message:"hello Vue!"
   },
   methods:{
     revermessage:function(){
       this.message="aaaaaa"+this.message
     }
   }


})


var app6=new Vue({
  el:"#app6",
  data:{
    message:"21312321"
  }
})

</script>





</html>

相關標籤/搜索

Vue 經常使用方法 一

Vue 經常使用方法一