Vue----v-for 循环及部分内部指令

最新推荐文章于 2023-11-16 16:56:31 发布

郭浩326

最新推荐文章于 2023-11-16 16:56:31 发布

阅读量534

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72785075

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置指令</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<!----
    v-text  ==== {{}}   ng-bind
    v-html  ====        ng-bind-html  xss
    v-show  ====        ng-show ng-hide
    v-if    ====        ng-if
    v-else  ====        ng-if
    v-else-if   ====    ng-if
    v-for   ====        ng-repeat
    v-on    ====        事件绑定
    v-bind  ====        绑定属性
    v-model ====        ng-model
    v-pre   ====    ?
    v-cloak ====        ng-cloak
    v-once
----->

<div id="app">
    {{msg}}
    <!--<div v-show="myShow">-->
    <!--今天天气真好，适合于逛街-->
    <!--</div>-->
    <!--<div v-if="myShow">-->
    <!--今天天气真好，适合于逛街-->
    <!--</div>-->
    <!--<span v-if="grade == 1">-->
    <!--恭喜您，幼儿园毕业了-->
    <!--</span>-->
    <!--<span v-if>-->
    <!--恭喜您,长大了，可以帮家里人干活了-->
    <!--</span>-->
    <!--<br>-->
    <!--<span v-if="grade == 1">-->
    <!--恭喜您，幼儿园毕业了-->
    <!--</span>-->
    <!--<span v-else-if="grade == 2">-->
    <!--恭喜您,长大了，已经二年级了-->
    <!--</span>-->
    <!--<span v-else-if="grade == 3">-->
    <!--恭喜您,长大了，已经三年级-->
    <!--</span>-->
    <!--<span v-else>-->
    <!--恭喜您,长大了，可以成家了-->
    <!--</span>-->
    <div v-for="(b,index) in books">
        <!--
            在VUE1.x版本，$index 存在
            但是在2.x版本中，尤大取消了
        -->
        {{b.id}}----{{b.name}}----{{b.price}}---{{index}}<br>
    </div>
</div>
<script>
    var app = new Vue({
        el : "#app",
        "data" : {
            msg : "小明",
            "myShow" : false,
            username : "liujianhogn",
            grade : 2,
            books : [
                {
                    id : 1,
                    name : "JavaScript从入门的放弃",
                    price : 52.5
                },
                {
                    id : 2,
                    name : "Java从入门的吐血",
                    price : 45
                },
                {
                    id : 3,
                    name : "PHP是世界上最好语言",
                    price : 40
                },
                {
                    id : 4,
                    name : "mysql从入门到删库",
                    price : 63
                }
            ]

        }
    });

</script>
</body>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue----v-for 循环及部分内部指令

html>html lang="en">head> meta charset="UTF-8"> title>内置指令title> script src="js/vue.js" >script>head>body><!---- v-text ==== {{}} ng-bind v-html ==== ng-bind-html
复制链接

扫一扫