Vue.js初步入门

来源：互联网发布：淘宝拍卖可以退货吗编辑：程序博客网时间：2024/05/16 09:33
<!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" xml:lang="en"><script type="text/javascript" src="vue.js"></script><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title></head><body>       <!--  <ul id = "id_test">        <a href="withdrawal.html"><li class="pl_list_d"><i class="t_2"></i>提现<></a>                <a href="orderhistory.html"><li class="b_r4_top"><i class="t_3"></i>资金流水<></a>                <a href="dealhistory.html"><li class="pl_list_d b_r4_bottom"><i class="t_4"></i>交易历史<></a>                <a href="tikets.html"><li class="b_r4_top"><i class="t_5"></i>我的体验券<></a>                <a href="trading_rules.html"><li><i class="t_6"></i>了解微盘<></a>                <a href="../brokerlogin.html"><li class="pl_list_d b_r4_bottom"><i class="t_11"></i>经纪人平台<></a>                <a href="newlist.html"><li class="b_r4_top"><i class="t_7"></i>公告<></a>                <a href="personInfo.html"><li class="b_r4_bottom"><i class="t_10"></i>个人资料<></a>        </ul> -->         <ul id = "id_test" >                <a v-for="item in arr_item" href="{{ item.href }}">                        <li class = "{{ item.li }}">                                 <i class = "{{ item.i }}"></i> {{ item.text }}<>                        </li>                </a>        </ul>        <template v-if="show">                <a  v-on:click="clickZhongguo"> {{ spanData }} </a>        </template>        <template v-else>                 <a  v-on:click="clickWaiguo"> {{ spanData2 }} </a>        </template><script type="text/javascript">var Data = {    arr_item: [      {href : 'withdrawal.html', li : 'pl_list_d', i : "t_2" , text : "提现" },      {href : 'orderhistory.html', li : 'b_r4_top', i : "t_3" , text : "资金流水" },      {href : 'dealhistory.html', li : 'pl_list_d b_r4_bottom', i : "t_4" , text : "交易历史" },    ],    show : 0, //非0即真    spanData : "中国人",    spanData2 : "外国人",  }    var Method = {        clickZhongguo : function(event){                alert("你点击了中国人")        },        clickWaiguo : function(event){                alert("你点击了外国人")        }}    new Vue({  el: 'body',  data: Data,  methods: Method})</script> </body></html>
0 0