vue 第二天（常用指令及插值语法）

vue 第二天（常用指令及插值语法）插值语法1、Mustache语法<div id="vue_one"><h1>{{site}}</h1><h1>{{one + 1}}</h1><h1>{{one + site}}</h1><h1>{{one +"-"+ site}}</h1><h1&

彼岸锋

111252人浏览 · 2021-02-27 08:42:45

彼岸锋 · 2021-02-27 08:42:45 发布

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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^