Vue 模板常用指令

最新推荐文章于 2024-07-15 17:15:41 发布

Ewan’s

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量133

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Dalfalt/article/details/129902242

版权

Vue 模板常用指令

晨讲人：尤恩

v-model

v-on:click (@click)

v-text

v-for

v-if

v-show

v-bind

常用指令：

指令带有前缀v-，以表示它们是Vue提供的特色attribute

v-model

数据的双向绑定v-model，表单输入绑定，不只应用于表单。

可以理解为:value=“value” 可以用v-model=“value” 取代，有了v-model就不用绑定value了

<body>
<div>
  {{info}}
    <!--v-model双向绑定，让控件的值和变量进行双向绑定，双向绑定只应用在控件中-->
    <input type="text" v-model="info">
</div>
<script src="js/vue.min.js"></script>
<script>
  let v = new Vue({
      el:"body>div",
      data:{
          info:"吉祥超帅~"
      }
  })
</script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ECOPeLiR-1680350959219)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20230319173620820.png)]

实际上v-model绑定的是value值，它实现的是视图和data的双向绑定，任何一个变，另一个都会实时改变。视图层和数据层可以相互改变

v-on:click

v-on: 也可以写成@

<body>
<div>
    {{info}}
    <!--事件绑定-->
    <input type="button" value="按钮" @click="f()">
    <input type="button" value="按钮" v-on:click="f()">
</div>
<script src="js/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"事件绑定"
        },
        methods:{
            f(){
                v.info="按钮被点击了!";
            }
        }
    })
</script>

</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UQqNnsPP-1680350959220)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20230319174309951.png)]

v-text

用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题（如果数据中有HTML标签会将html标签一并输出）

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

相当于原生js中的innerText

	<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {{msg}}
    </p>
</div>
 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });
 
</script>

拓展:

<div>
    <!--{{变量}}:插值, 让此处的文本内容和变量进行绑定-->
    {{info}}<br>
    <b>{{info}}</b>
    <!--v-text:让元素的文本内容和变量进行绑定-->
    <p v-text="info"></p>
    <!--V-html:让元素的标签内容和变量进行绑定-->
    <p v-html="info"></p>
</div>
<script src="js/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data:{
            info:"文本相关指令<b>abc</b>"
        }
    })
</script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E16WWFBe-1680350959221)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20230319175222389.png)]

v-for

四种使用方式

数组

arr: [1, 2, 3, 4, 5],


<p v-for="(item,index) in arr">数值：{{item}}，索引：{{index}}</p>

在对象数组

objArr: [{
		id: 1,
        name: "Q"
    },
    {
        id: 2,
        name: "W"
    },
    {
        id: 3,
        name: "E"
    },
    {
        id: 4,
        name: "R"
    },
],

<p v-for="item in objArr">id:{{item.id}}--------name:{{item.name}}</p>

对象

（1)先在data中定义对象

 obj: {
  	 id: "100",
     name: "qwer",
     sex: "male"
 }

(2)在标签内遍历

<p v-for="(val,key,i) in obj">值：{{val}},键：{{key}}，索引：{{i}}</p>

在这里插入图片描述

迭代数字

和数组、对象数组、对象不同的是，迭代数字更加纯粹，看起来更像是为了循环而循环，不需要任何定义，直接在标签中使用，并且count是从1开始的。
```
<p v-for="count in 10">这是第{{count}}次循环</p>
```

v-if

利用v-if可以直接写判断语句，直接在标签里判断，当istrue=0时只显示pop,当=1时显示pop1,当都不是时，显示v-else的内容。它们仨只有一个显示，一般只用到v-if

哪个为真显示哪个，三者中间不能有别的标签。

<h4> v-if的用法</h4>
<p v-if="istrue==0">{{ pop }}</p>
<p v-else-if="istrue==1">{{ pop1 }}</p>
<p v-else>我是else</p>


const data = {
			istrue:1,
            pop:"我是if",
            pop1:"istrue=1,我是else if",
		}

答案：istrue=1,我是else if

v-show

也是控制元素的显示与隐藏。（通过控制样式display：none）用于频繁切换显示与隐藏。

<p v-show="show">我是v-show</p>

data={
	show:true,
}

v-bind

用于属性的绑定，当属性需要变化时，用v-bind绑定属性。

例如 title ,src, index等属性都可以绑定变量。

v-bind写法等同于冒号(😃。

例如 v-bind:src=“imgUrl” 等同于:src=“imgUrl”

<div>
    {{info}}
    <!--属性绑定, 让某个属性的值和变量进行绑定-->
    <input type="text":value="info">
    <input type="text" v-bind:value="info">
    <a :href="url">超链接</a>
    <img :src="imgName" alt="">
</div>
<script src="js/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "属性绑定",
            url:"http://www.baidu.com",
            imgName:"a.jpg"
        }
    })

</script>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHSDZ48L-1680350959224)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20230319181047359.png)]

mgName" alt=“”>

```

[外链图片转存中…(img-IHSDZ48L-1680350959224)]