

 <!DOCTYPE html><html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>专题 - vue2入门与提高视频教程 </title>
 
<script src="vue.js" type="text/javascript"></script>
 

</head>
<body  >
 
vuejs
<div id="app">

<input type="text"  v-model="message"  />
<br />
 {{ message | touppercase }}
<br />

<br />
<ul>
<li v-colorchange2 v-for="list in lists">{{ list.text }}</li>
 
</ul>



<br /><br /><br />

<div > test show: <br />
<div  v-if="show">  111111111111 </div>
<div  v-else-if="2">  33333 </div>
<div  v-else>  2222 </div>

</div>


 </div>

 <script>

 Vue.directive('colorchange', {
  bind: function (el, binding, vnode) {
     el.style.color = '#'+Math.random().toString().slice(2,8);
  }
})



var vm = new Vue({
  // 选项
   el:'#app',
   data:{
   
   	message:'hello vue',
   	lists:[
      { text: '学习 JavaScript1' },
      { text: '学习 Vue2' },
      { text: '整个牛项目3' }
    ],
    show:false,



   },
   directives:{
        colorchange2: {
           bind: function (el, binding, vnode) {
               el.style.color = '#'+Math.random().toString().slice(2,8);
            }
        }

   },
   filters:{
       touppercase:function(value){

          return value.toUpperCase()
       }
   }


})
 </script>
</body>
</html>
 
 


