vue 第二天(常用指令及插值语法)

vue 第二天(常用指令及插值语法)

插值语法

1、Mustache语法

<div id="vue_one">
    <h1>{{site}}</h1>
    <h1>{{one + 1}}</h1>
    <h1>{{one + site}}</h1>
    <h1>{{one +"-"+ site}}</h1>
    <h1>{{one}},{{site}}</h1>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "1234",
            one: 2
        }
    })
</script>

2、v-once 只能执行一次,不能被修改

<div id="vue_one">
    <h1>{{site}}</h1>
    <h1 v-once>{{site}}</h1>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "我的第一个vue程序",
        }
    })
</script>

3、v-html 格式化格式可以写带有标签的格式(如有必须别用,会造成xxs安全问题)

<div id="vue_one">
    <h1>{{site}}</h1>
    <h1 v-html="site"></h1>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "<a href='http://www.baidu.com'>我是百度</a>",
        }
    })
</script>

4、v-text 覆盖原有标签里面的text文本

<div id="vue_one">
    <h1>{{site}},123</h1>
    <h1 v-text="site">123</h1>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "1234",
        }
    })
</script>

5、v-pre 格式化最初的样子(原本的语法)

<div id="vue_one">
    <h1>{{site}}</h1>
    <h1 v-pre>{{site}}</h1>
</div>
<script type="text/javascript">
    const vm = new Vue({
        el: '#vue_one',
        data: {
            site: "1234",
        }
    })
</script>

6、v-cloak 插值表达式存在的问题"闪动",并定义style样式

<style type="text/css">
    [v-cloak] {
        display: none !important;
    }
</style>
<body>
<div id="vue_one">
    <h1>{{site}}</h1>
    <h1 v-cloak>{{site}}</h1>
</div>
<script type="text/javascript">
    setTimeout(function () {
        const vm = new Vue({
            el: '#vue_one',
            data: {
                site: "1234",
            }
        })
    },1000)
</script>






花开一千年,花落一千年,花叶永不见

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页