Vue.js--笔记一(v-bind,v-if,v-for)

最新推荐文章于 2024-09-11 12:32:04 发布

zhengfu920227

最新推荐文章于 2024-09-11 12:32:04 发布

阅读量193

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mianwan6227/article/details/106354330

版权

前言：完全是供自己学习使用，基本原则先按照官网教程来，可能中间会记录自己遇到的一些疑惑，本着各位开源先驱的意志，希望能帮助到同样在路上的同伴。

Vue.js官网 -- https://cn.vuejs.org/

Vscode官网 -- https://code.visualstudio.com/

进入正题直接开搂

v-bind

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <span v-bind:title="pre_title" v-bind:style="pre_style">{{pre_content}}</span>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                pre_content: 'Hello Vue!',
                pre_title: '鼠标放在文本上就是提示',
                pre_style: 'color:red',
            }
        })
</script>

v-if，v-for

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <ul>
                <li v-for = "pre_item in pre_items">
                    <span v-if = "pre_item.pre_items_seen">{{pre_item.pre_items_content}}</span>
                </li>
            </ul>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                pre_items : [

                    {pre_items_content : 'content_1',pre_items_seen : true},
                    {pre_items_content : 'content_2',pre_items_seen : false},
                    {pre_items_content : 'content_3',pre_items_seen : true}

                ]
            }
        });
    
       
</script>