zoukankan      html  css  js  c++  java
  • 加冒号的,说明=后面的是一个变量或者表达式,没加冒号的=后面就是对应的字符串字面量

    <!DOCTYPE html>
    <html>
    
    <head>
        <title> hello world vue </title>
        <meta charset="utf-8" />
    </head>
    
    <body>
        <div id="app" v-cloak>
            <anchor :level="2" title="2+2">特性2</anchor>
            <!-- 如果是title="2+2",此时title被当成字符串变量,结果还是2+2  -->
              <!-- 如果是:title="2+2",此时title被当成计算变量,结果是4  -->
            <script type="text/x-template" id="anchor">
                <div>
                    <h1 v-if="level === 1">
                        <a :href="'#'+title">
                            <slot></slot>
                        </a>
                    </h1>
                    <h2 v-if="level === 2">
                        <a :href="'#'+title">
                            <slot></slot>
                        </a>
                    </h2>
                    <h3 v-if="level === 3">
                        <a :href="'#'+title">
                            <slot></slot>
                        </a>
                    </h3>
                    <h4 v-if="level === 4">
                        <a :href="'#'+title">
                            <slot></slot>
                        </a>
                    </h4>
                    <h5 v-if="level === 5">
                        <a :href="'#'+title">
                            <slot></slot>
                        </a>
                    </h5>
                    <h6 v-if="level === 6">
                        <a :href="'#'+title">
                            <slot></slot>
                        </a>
                    </h6>
                </div>
            </script>
        </div>
    </body>
    
    </html>
    
    <script src="jquery-3.1.1.js"></script>
    <script src="vue.js"></script>
    
    
    <script>
        $(document).ready(function() {
    
        });
    </script>
    
    
    <script>
        Vue.component('anchor', {
            template: '#anchor',
            props: {
                level: {
                    type: Number,
                    required: true
                },
                title: {
                    type: String,
                    default: ''
                }
            }
    
        });
    
        var app = new Vue({
            el: '#app',
            data: {},
            computed: {},
            methods: {},
            components: {},
            mounted: function() {}
        });
    </script>
  • 相关阅读:
    java实现算年龄
    java实现手机尾号评分
    java实现手机尾号评分
    java实现手机尾号评分
    java实现手机尾号评分
    java实现手机尾号评分
    java实现三角螺旋阵
    Delphi ActiveForm发布全攻略
    序列化FastReport,重要提示少走弯路 good
    深入探索ScrollWindow
  • 原文地址:https://www.cnblogs.com/qqhfeng/p/11510892.html
Copyright © 2011-2022 走看看