Vue3指令的含义与用法

指令是带有 v- 前缀的特殊属性。
 
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
 
实例
 
<div id=”app”>
    <p v-if=”seen”>现在你看到我了</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true  /* 改为false,信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount(‘#app’)
</script>
 
 
这里, v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
 
另外还有其它很多指令,每个都有特殊的功能。例如,v-for 指令可以绑定数组的数据来渲染一个项目列表:
 
实例
<div id=”app”>
  <ol>
    <li v-for=”site in sites”>
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: ‘Google’ },
        { text: ‘Runoob’ },
        { text: ‘Taobao’ }
      ]
    }
  }
}
 
Vue.createApp(app).mount(‘#app’)
</script>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64904.shtml

张贴在3