Vue基础指令介绍及用法讲解


vue中的指令按照不同的用途可以分为如下6大类:
内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令

内容渲染指令(v-text、v-html)

  v-text 指令(更新元素的文本内容。如果要更新部分的文本内容,需要使用 { { }} 插值。)、v-html 指令(更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译)。

<div id="app">
	<!-- 默认写法会替换所有内容,使用插值表达式{
   {
   }}可以替换指定内容 -->
	<!-- 注意:v-text、v-html都会将所有的文本值用获得的数据替换掉,v-text也可进行字符串的拼接操作 -->

	<h3 v-text="message + '呀!'">柳小姐</h3>  //你好呀!
	<h3>{
   {
   message + '呀!'}}柳小姐</h3>  //你好呀!柳小姐

	<!-- v-html会把html结构解析成标签,v-text无论内容是什么都只会解析成文本 -->
	<p v-html="message"></p>  //你好
	<p v-text="message"></p>  //你好
	<p v-html="web"></p>  //一个百度的链接
	<p v-text="web"></p>  //<a href='https://www.baidu.com'>百度</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	let app = new Vue({
   
		el: '#app',
		data: {
   
			message: '你好',
			web: "<a href='https://www.baidu.com'>百度</a>",
		}
	})
</script>

属性绑定指令(v-bind)

  插值表达式只能使用在元素的文本节点上,不能使用在元素的属性节点中。所以可以使用该指令:v-bind 指令:为元素的属性动态绑定属性值。语法糖为:。操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 classstyle 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

<div id="app">
	<img v-bind:src="imgSrc" width="270px" height="400px">
	<!-- 语法糖(简写方法)-->  
	<img :src="imgSrc" width="270px" height="400px">
	<!-- 此外,v-bind:class指令也可以与普通的class属性共存。以下结果:<div class="static active"></div>-->
	<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
	<!-- 表达式结果的类型是对象(对象语法)--> 
	<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 
	<div :style="styleObject"></div>
	<div :class="[activeColor,width]"></div> <!-- 表达式结果的类型是数组(数组语法)--> 
</div>
<!
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值