Vue中的指令及应用合集(v-指令)

况几

已于 2022-07-23 00:12:56 修改

阅读量365

点赞数

分类专栏： web前端文章标签： vue.js javascript 前端

于 2022-07-22 17:10:18 首次发布

本文链接：https://blog.csdn.net/angrynouse/article/details/125924610

版权

本文详细介绍了Vue中的各种内置指令，包括v-html、v-bind、v-if/v-else、v-show、v-for、v-on/v-model以及v-slot，并通过实例展示了它们的用法。此外，还探讨了自定义指令的全局与局部注册，帮助读者深入理解Vue的模板语法和增强型指令的使用。

摘要由CSDN通过智能技术生成

0. 模板语法

   {
  { }}中绑定的也可以是单个表达式，不能是语句
   单个表达式：3 > 5 ?  'yes' :  'no'
   语句：var a = 20; // 凡是这种带分号的就是语句

    <p>{
   {
    3 > 5 ? 'yes' : 'no' }}</p>  
    // 页面渲染了 no

export default {
   
	 data(){
   
	    return{
   
	      link:"<a href='http://cn.vuejs.org'>vue官网</a>"
	    }
	  },
 }

    <p v-html="link"></p>

export default {
   
  data(){
   
    return{
   
      classCurrent:"current"
    }
  },
}

<p v-bind:class="classCurrent"></p>
// 缩写
<p :class="classCurrent"></p>

export default {
   
  data(){
   
    return{
   
      flag:'true'
    }
  },
}

// 如果v-if后的条件为true，则显示v-if指令标签的内容
// 否则，显示v-else指令标签的内容
    <p v-if="flag">是真的</p>
    <p v-else>是假的</p>

    <div v-if="flag">
    	// flag为true,则只显示这部分内容
        <h3>我是第一段话</h3>
        <p>显示第一段话</p>
    </div>
    <</

关注

专栏目录