码迷,mamicode.com
首页 > 其他好文 > 详细

vue1

时间:2017-06-09 20:21:09      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:load   orange   com   round   cti   har   ext   user   name   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    msg:welcome vue
                }
            });
        };
    </script>
</head>
<body>
    <div id="box1">
        <input type="text" v-model="msg">
        <input type="text" v-model="msg">        <!-- js里面的没有动态改变,双向数据绑定 -->
        <br>
        {{msg}}
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,  //选择器
                data:{
                    msg:welcome vue
                }
            });
        };
    </script>
</head>
<body>
    <div>
        <input type="text" v-model="msg">
        <input type="text" v-model="msg">
        <br>
        {{msg}}
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:body,
                data:{
                    msg:welcome vue,
                    msg2:12,
                    msg3:true,
                    arr:[apple,banana,orange,pear],
                    json:{a:apple,b:banana,c:orange}
                }
            });
        };
    </script>
</head>
<body>
    <input type="text" v-model="msg">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    {{msg2}}
    <br>
    {{msg3}}

    <br>
    {{arr}}    //apple,banana,orange,pear 
    <br>
    {{json}}   //[object Object]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:#box,
                data:{
                    arr:[apple,banana,orange,pear],
                    json:{a:apple,b:banana,c:orange}
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">  循环li
                {{value}}   {{$index}}
                
apple 0
banana 1
orange 2
pear 3
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="value in json">
                {{value}}   {{$index}}  {{$key}}
apple  0  a
banana  1  b
orange  2  c
            </li>
        </ul>

        <hr>
        <ul>
            <li v-for="(k,v) in json">
                {{k}}   {{v}}   {{$index}}  {{$key}}
a  apple  0  a
b  banana  1  b
c  orange  2  c
            </li>
        </ul>
    </div>
</body>
</html>

 

vue1

标签:load   orange   com   round   cti   har   ext   user   name   

原文地址:http://www.cnblogs.com/yaowen/p/6973326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!