ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue.js

2019-12-03 10:02:18  阅读:11  来源: 互联网

标签:el vue app js Vue var new message



<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<script src="vue.js"></script>
<title>Insert title here</title>
</head> <body>
 <div id="app">
  {{message}}
 </div>
 
 <div id="app-2">
  <span v-bind:title='message'>
   鼠标悬停看到时间
  </span>
 </div>
 
 <div id="app-3">
  <p v-if="seen">
   现在你看到我了!
  </p>
 </div>
 
 <div id="app-4">
  <ol>
   <li v-for="obj in objects">
    {{obj}}
   </li>
  </ol>
 </div>
 
 <div id="app-5">
  <p>{{message}}</p>
  <button v-on:click="tongYi">同义语句</button>
 </div>
 
 <div id="app-6">
 </div> </body>
<script>
 var vue = new Vue({
  el:'#app',
  data:{message:'holleWord'}
  });
  
 var vue2 = new Vue({
  el:'#app-2',
  data:{message:"现在时间:"+new Date().toLocaleString()}
  });
  
 var vue3 = new Vue({
  el:"#app-3",
  data:{
   seen:true
   }
  });
  
 var vue4 = new Vue({
  el:"#app-4",
  data:{
   objects:[
   {text:'王竞伟'},
   {text:'王梓郡'},
   {text:'王梓琪'}]
   }
  });
  
 var vue5 = new Vue({
  el:'#app-5',
  data:{message:"我有两个小棉袄!羡慕吧!"},
  methods:{
   tongYi:function(){
    if(this.message == "我有两个小棉袄!羡慕吧!"){
     this.message = "羡慕吧,我有两个小棉袄!";
     }else{
      this.message = "我有两个小棉袄!羡慕吧!";
      }
    
   }
  }
  });
  
 var vue6 = new Vue({
  el:'#app-6',
  template:"<div><input type='text' v-bind:value='setValue' :class='setValue'></input><br> {{setValue}} <input type='text' v-model='upValue'></input> <br> {{upValue}} </div>",
  data:function(){
     return {
      setValue:"单向数据绑定",
      upValue:"双向数据绑定"
      };
   }
  
 });
 
 
</script>
</html>  

标签:el,vue,app,js,Vue,var,new,message
来源: https://www.cnblogs.com/gnwzj/p/11975022.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有