【vue】基础指令及属性绑定

本文介绍了Vue.js的基础指令,包括插值表达式、v-clock指令、v-html和v-text的区别,以及v-pre的用法。此外,还详细讲解了v-bind属性绑定的动态绑定属性值功能,说明了v-bind的简写形式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

插值表达式

插值表达式用法:{{}}

<div class="box">
        <!-- 使用{{}}能够插入自己想要的值 -->
        <div>{{name}}</div>
        <p>{{age+10}}</p>
        <div>函数{{fn()}}</div>
        <div>函数加内容{{fn()+"hhh"}}</div>
        <div>三目运算符{{test==10?"hello":"7777"}}</div>
        <!-- 由于{{}} 是一种插值表达式  会作为js语法执行环境  就可以理解为能直接在插值里面写一些方法(不代表所有js语法)-->
        <div>{{10>9?"正确":"错误"}}</div>
        <div>{{10<7&&"正确"||"错误"}}</div>
    </div>
    <script>

        //方法一
        var vm = new Vue({
            el: ".box",
            data: {
                name: "小名",
                age: 20,
                fn: () => {
                    return "你好"
                },
                test: 10
            }
        })
     </script>

插值表达式支持一些js数据类型,但window下面的全局变量不支持

   <div class="box3">
        <!-- 使用for循环会报错 -->
        <!-- <div>{{for(let i=0;i<arr.length;i++)}}</div> -->

        <!-- console.log报错 -->
        <!-- <div>{{ console.log(arr)}}</div> -->

        <div>{{arr.join("")}}</div> 
        
        <!-- aa属于window全局变量,不支持 -->
        <div>{{aa}}</div>
    </div>
    <script>
      // 错误示范
        let aa="不支持"
        new Vue({
            el:".box3",
            data:{
                arr:[1,2,4,3]
            }
        })
    </script>
指令
  • v-clock 在vue框架运行时 项目中的v-clock属性进行隐藏 把v-clock放在最外层标签 方便统一
  • v-html 相当于innerHTML 标签再添加内容将被忽视
  • v-text 相当于innerText
  • v-pre 插件表达式会被识别为文本内容,而不是js表达式
    <div id="app" v-clock>
            <div>{{name}}</div>
            <div v-html="book">{{book}}</div> <!--字体变粗-->
            <div v-html="book">66666</div><!--字体变粗-->
          <div v-text="book"></div><!--<b>字体变粗</b>-->
         <div v-pre>{{cs}}</div><!--{{cs}}-->
    </div>
      <script>
        new Vue({
            el:"#app",
            data:{
                 name:"小明",
                 cs:"今天星期一",
                 age:22,
                 book:"<b>字体变粗</b>"
            }
        })
    </script>
属性绑定

v-bind 可以为元素的属性动态绑定属性值 vue 规定(类似语法糖)v-bind:指令可以简写成":"

 <div id="app">

        <div>{{obj.name}}</div>  <!-- 小红 -->
        <div>{{obj.obj2.name}}</div>  <!-- 小明 -->
        <div v-html="obj.obj2.name"></div><!-- 小明 -->
       
        <!-- v-bind 可以为元素的属性动态绑定属性值   vue 规定v-bind:指令可以简写成":"-->
         <div v-bind:class="box"></div>
        <a v-bind:href="taobao[0].dizhi">{{taobao[0].name}}</a>
      <!-- 简写":" -->
        <input type="text" :value="emial">
        <img :src="obj.img" >
    </div>

    <script>

        new Vue({
            el:"#app",
            data:{
                box:"p",
                obj:{
                    name:"小红",
                    obj2:{
                        name:"小明"
                    },
                    img:"https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661878800&t=c1135c11230bcc19ec13b67b3ae3d94b"
                },
                taobao:[{
                    dizhi:"https://www.taobao.com/",
                    name:"淘宝一下"
                }],
                emial:"2656143637@qq.com"

            }
        })
    </script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值