vue基础(一):插值、过滤器、指令

本文详细介绍了Vue.js中的数据绑定方式,包括插值、属性绑定、内部指令如v-bind、v-on、v-if、v-show和v-for的使用方法,以及过滤器如何改变文本格式。探讨了双大括号插值、属性绑定的不同形式、条件渲染指令及循环渲染指令的应用场景。

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

一、插值
1、双大括号

<span>{{text}}</span>

2、作为属性不用{{}},但要用:绑定属性

 <img :src="item.imagepath">

3、 v-once 指令,一次性地插值,当数据改变时,插值处的内容不会更新。

<span v-once>{{ msg }}</span>

4、纯html

  <p  v-html="contentData.content"></p>

5、javascript表达式

<div v-bind:id="'list-' + id"></div>

6、从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data 属性 attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。

二、过滤器(改变文本格式)
Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用。
在组件内部用filters:{ 过滤器名:function(value){ return … } }
调用过滤器:数据 | 过滤器名

1、局部过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!--`v-bind`-->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

2、全局过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

当全局过滤器和局部过滤器重名时,会采用局部过滤器。
3、过滤器可串联

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

4、过滤器可接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 ‘arg1’ 作为第二个参数,表达式 arg2 的值作为第三个参数。

<h1>{{msg | filterA('hehe')}}</h1>

data(){
	return{
	msg:'hello'
	}
}

vue.filter('filterA',function(value,arg1){
	return arg1+' '+value.split('').reverse().join('');//翻转
}

结果是:hehe olleh

三、内部指令
1、v-bind 绑定属性

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

2、v-on 绑定事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

3、v-if
1)根据表达式 的真假来移除/插入元素。true才渲染

<p v-if="false">hbjhg</p>

4、v-show
一直存在,true才显示

<p v-show='false></p>

6、v-for
哪个要循环就绑定哪个

<ul>
	<li v-for='(iten,index) in info' :key='index' >{{item}}</li>
</ul>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值