vue---模板语法

一次性插入，不再修改：v-once

    <body>
        <div id="app">
            <h1>{{message}}</h1>
            <h1 v-once>v-once：{{message}}</h1>
            <button type="button" @click="changetext">改变文字</button>
        </div>
        <script type="text/javascript">
            var app=new    Vue({
                el:"#app",
                data:{
                    message:"hello Vue"
                },
                methods:{
                    changetext:function(){
                        this.$data.message="hello world"
                    }
                }
            })
        </script>
    </body>

插入html标签：v-html

    <body>
        <div id="app">
            <!-- 不会读取标签，全部以文本形式展示 -->
            <h1>{{htmlTxt}}</h1>
            <!-- 以html标签形式被读取 -->
            <h1 v-html="htmlTxt"></h1>
        </div>
        <script type="text/javascript">
            var app=new    Vue({
                el:"#app",
                data:{
                    htmlTxt:'<span>hello</span>'
                }
                
            })
        </script>
    </body>

绑定动态属性：v-bind（可直接省略，用“：”代替）

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #login{
                background-color: aqua;
            }
            #register{
                background-color: palevioletred;
            }
        </style>
    </head>
    <body>
        <div id="app">
            
            <h1 v-bind:id="idname">hallo</h1>
            <button @click="changeId">修改id</button>
        </div>
        <script src="js/hello.js"></script>
        <script type="text/javascript">
            var app=new    Vue({
                el:"#app",
                data:{
                    idname:"login"
                },
                methods:{
                    changeId:function(){
                        this.idname="register"
                }
                
            },
            })
        </script>
    </body>
</html>

字符串拼接

<body>
        <div id="app">
            {{firstname+lastname}}
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    firstname:"张",
                    lastname:"三"
                }
            })
        </script>
    </body>

三元运算符

    <body>
        <div id="app">
            {{isVip?"欢迎VIP用户":"普通用户"}}
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    isVip:false
                }
            })
        </script>
    </body>

事件绑定（v-on 等价于 @）

例如：“v-on：click” 等价于“@click”

posted on 2020-05-17 21:21 0黑曼巴00 阅读(196) 评论(0) 收藏举报