vue3的基础入门02

最新推荐文章于 2024-05-06 12:49:24 发布

VIP文章中年阿呆

最新推荐文章于 2024-05-06 12:49:24 发布

阅读量2.2k

点赞数 3

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_45808678/article/details/123400981

版权

1、插值表达式 { {}}

I、语法：由两对大括号组成，称为“Mustache”语法
II、作用: 用在页面标签中插入值，进行数据的绑定显示，且当值发生变化时，标签会重新渲染夹在，称为响应式特性
III、用法：<标签> { {Vue对象数据仓库变量|JS表达式|JS内置对象}}</标签>

<body>
    <div id="app">
        <p>{
  {name}}</p>   
        <p>{
  {age}}</p>   
        <p>{
  {user}}</p>   
        <p>{
  {arr}}</p>   

        <!-- 直接定义值 -->
        <p>{
  {'这是字符串'}}</p>
        <p>{
  { ['这是数组','这是数组1'] }}</p>
        <p>{
  { {name:'alice',age:age} }}</p>
        <!-- js运算 -->
        <p>{
  { age>=18 ? '成年':'未成年' }}</p>
        <p>{
  { age+1 }}</p>
        <!-- JS内置对象 -->
        <p>{
  { new Date() }}</p>
        <p>{
  { Math.random() }}</p>
        
    </div>
</body>
<script>
     Vue.createApp({
        data(){
            return {
                name:'tom',
                age:18,
                user:{
                    id:1001,
                    username:'admin',
                    password:'123'
                },
                arr:[1,2,3]

            }
        }
    }).mount('#app')

常用指令：

v-text，v-html相同和区别

v-html会解析文本中的html标签;

<body>
      <div id="app">
        <p>{
  { msg }}</p>
        <!-- v-text -->
        <p v-text ='msg'></p>
        <p v-text ='info'></p>
        <hr>
        <!-- v-html -->
        <p v-html="msg"></p>
        <p v-html="info"></p>
      </div>
</body>
<script>
        Vue.createApp({
    
            data(){
    
                return {

最低0.47元/天解锁文章

中年阿呆

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue3的基础入门02

1、插值表达式 {{}}I、语法：由两对大括号组成，称为“Mustache”语法II、作用: 用在页面标签中插入值，进行数据的绑定显示，且当值发生变化时，标签会重新渲染夹在，称为响应式特性III、用法：<标签> {{Vue对象数据仓库变量|JS表达式|JS内置对象}}</标签><body> <div id="app"> <p>{{name}}</p> <p>{{age}}
复制链接

扫一扫