Vue学习(2)指令

最新推荐文章于 2022-11-08 10:00:49 发布

ssqsssq

最新推荐文章于 2022-11-08 10:00:49 发布

阅读量215

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43778744/article/details/105209275

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--
 * @Author: your name
 * @Date: 2020-02-01 11:19:29
 * @LastEditTime: 2020-03-30 21:32:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \x\vue-order.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            background-color:red;
        }
        .active {
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app">

    </div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript">
        // 创建实例化对象
        // {{}} 插值
        // v-text innerText
        // v-html innerHtml
        // v-if true显示 false则显示else
        // v-show 控制Dom原素的显示隐藏display: none | block
        
        // 控制类名对元素显示隐藏 display: none | block
        // v-bind 绑定标签属性（内置属性，自定义属性）简写 :

        // v-on: 事件名='函数名'简写 :@
        // v-for "(item, index) in 对象"
        /*
            v-if 条件渲染，性能消耗，dom销毁创建
            v-show 性能消耗小，都会渲染，css切换
            v-show 更高的初始渲染开销，v-if有更高的切换开销
            频繁切换 -- v-show
            很少改变 -- v-if
        */

        var vm = new Vue({
            el: "#app",
            data: function () {
                // 返回必须是一种对象
                return {
                    msg: 'order',
                    msg2: '<h2>o</h2>',
                    isShow: false,
                    isGreen: false,
                    menuList: [
                        {id: 1, name:'da', price:70},
                        {id: 2, name:'da1', price:60},
                        {id: 3, name:'da2', price:80},
                    ],
                    person: {
                        name: 'a',
                        age: '13',
                        fav: 'PE'
                    }
                }
            },
            // 默认加载template的模板
            template: '<div class="app">\
                            <h2>{{msg}}</h2>\
                            <p v-html="msg2"></p>\
                            <p v-text="msg"></p>\
                            <div v-if="isShow">begin</div>\
                            <div v-if="!isShow">end</div>\
                            <div v-if="Math.random() > 0.5">xx</div>\
                            <div v-else>x</div>\
                            <div v-show="isShow">xianshi</div>\
                            <div v-show="!isShow">wu</div>\
                            <div class="box" v-on:click="clickHandler" v-bind:class="{active:isGreen}"></div>\
                            <ul>\
                                <li v-for="(item, index) in menuList">\
                                    <h5 v-text="item.id"></h5>\
                                    <h3>{{item.name}}</h3>\
                                    <em>{{item.price}}</em>\
                                </li>\
                            </ul>\
                            <ul>\
                                <li v-for="(value, key) in person">\
                                    <h5>{{key}} == {{value}}</h5>\
                                </li>\
                            </ul>\
                        </div>',
            methods: {
                clickHandler(e) {
                    console.log(this)
                    this.isGreen = !this.isGreen;
                }
            },
        });
    </script>
</body>

</html>

在这里插入图片描述

ssqsssq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习(2)指令

<!-- * @Author: your name * @Date: 2020-02-01 11:19:29 * @LastEditTime: 2020-03-30 21:32:11 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \x\vue-or...
复制链接

扫一扫

专栏目录