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

最新推荐文章于 2025-10-26 21:49:10 发布

原创最新推荐文章于 2025-10-26 21:49:10 发布 · 820 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

插值表达式

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

<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>