Vue的指令系统：v-text、v-html、v-if、v-else、v-bind、v-on、v-for

最新推荐文章于 2024-11-01 14:29:13 发布

每一天，每一步

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量116

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/u010234868/article/details/119954702

版权

Vue 专栏收录该内容

123 篇文章 2 订阅

订阅专栏

本文通过一个简单的 Vue.js 示例展示了如何使用 Vue 的指令系统（如 v-text、v-html、v-if、v-show、v-bind 和 v-on）以及数据驱动视图的概念。内容包括条件渲染、事件监听、属性绑定等，同时涉及到数组和对象的数据操作，揭示了 Vue.js 在前端开发中的强大功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    msg: '指令系统',
                    msg2: '<h2>指令系统</h2>',
                    isShow: true,
                    text: 'hi',
                    isRed: true,
                    menu: [
                        {id: 1, name: 'apple', price: 10},
                        {id: 2, name: 'banana', price: 11},
                        {id: 3, name: 'watermelon', price: 30}
                    ],
                    student: {
                        name: 'zs',
                        age: 17,
                        sex: 'boy'
                    }
                }
            },
            methods: {
                clickHandler(e) {
                    this.isRed = !this.isRed;
                }
            },
            template: ` 
                        <div>
                            <h2>{{msg}}</h2>
                            <p v-text="msg"></p>
                            <p v-html="msg2"></p>
                            <p v-text="1+1"></p>
                            <p v-if="isShow">true</p>
                            <p v-if="isShow">false</p>
                            <p v-if="Math.random() > 0.5">显示</p>
                            <p v-else="!isShow">隐藏</p>
                            <p v-show="isShow">show</p>
                            <p v-show="!isShow">hide</p>
                            <p v-bind:class="{red: true}" :aa= 'text'>box</p>
                            <p v-bind:class="{red: isRed}" :aa= 'text'>box</p>  // 数据驱动视图
                            <p v-on:click="clickHandler" v-bind:class="{red: isRed}">box click</p>
                            <ul>
                                <li v-for="(item, index) in menu">
                                    <h5 v-text="item.id"></h5>
                                    <h3>{{item.name}}</h3>
                                    <em>{{item.price}}</em>
                                </li>
                            </ul>
                            <ul>
                                <li v-for="(value, key) in student">
                                    {{key}} === {{value}}
                                </li>
                            </ul>
                        </div>
                    `
        });

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