Vue之模板语法

最新推荐文章于 2024-05-05 12:34:29 发布

Volcano_WQL

最新推荐文章于 2024-05-05 12:34:29 发布

阅读量145

点赞数

分类专栏： Vue.js自学笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_45614713/article/details/105222803

版权

Vue.js自学笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

v-once一次使用，不受改变影响

v-html 插入含有html标签的内容、v-band: ->：、v-on: ->@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <hr>
<!--        一次性插入，不受改变影响-->
        <h1 v-once>{{msg}}</h1>
<!--        v-html  插入 html内容-->
        <h1>{{htmlText}}</h1>
        <h1 v-html="htmlText"></h1>
<!--        v-bind 绑定属性 ，简写：“ ： ”-->
<!--        {{}} 表达式-->
        <!--事件绑k定  点击事件绑定 v-on:click=''
                            简写： ’ @click='' ‘-->
        <button v-on:click='changeBg'>改变背景</button>
        <button @click="changeBg">改变背景</button>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"hello world",
                htmlText:'<em>hello</em>',
            },
            methods:{
                changeBg:function (){
                    //不建议这样去获取body，只是作为例子
                    document.body.style.background='skyblue'
                }
            }
        })
    </script>
</body>
</html>