Vue小白篇 -Vue 的模板语法

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pymu/p/11459814.html

文章标签：

#javascript #ViewUI

本文详细介绍了Vue.js中模板语法的使用方法，包括文本插值、表达式计算、三元运算符的应用及字符串操作等核心内容。通过实例展示了如何在HTML元素中嵌入和展示动态数据，以及如何进行条件判断和数据反转等操作。

可以插入任何你想插入的内容，除了 if-else if-else用三元运算符代替

<div id="box">
    <!--模板语法-->
    <h2>{{ msg }}</h2>
    <h3>{{ 'hello world' }}</h3>  <!--带引号的  是写死的-->
    <h3>{{ 1+1 }}</h3>   <!--可以运算-->
    <h3>{{ {'name':'tom'} }}</h3>     <!--可以插对象-->
    <h5>{{ person.name }}</h5>
    <h2>{{ 1>2 ? '真的':'假的' }}</h2>  <!--三元运算符-->
    
    <!--输入euV olleh"-->
    <p>{{ msg2.split('').reverse().join() }}</p>  
</div>


<script>
    // 2、实例化对象
    new Vue({
        el:'#box', 
        data:{
            msg: 'hello',
            person:{
                name: 'tom',
            },
            msg2: 'hello Vue',
            text: '<h2>好嗨哟</h2>'
        }
    });
</script>

转载于:https://www.cnblogs.com/pymu/p/11459814.html