前端开发随笔（四）——关于“V-”指令

最新推荐文章于 2024-05-08 00:45:20 发布

XB_DL

最新推荐文章于 2024-05-08 00:45:20 发布

阅读量376

点赞数

分类专栏： Vue.js 文章标签： Vue.js

本文链接：https://blog.csdn.net/XB_DL/article/details/79611716

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.V-if指令

V-if指令相当于If-else中的If条件语句，V-if=“一个Boolean类型的值或表达式”，在标签中V-if的值为真，则显示这个标签的所有内容，反之则隐藏。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
     <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>

seen的值影响<p>标签中的文字的出现或隐藏。

2.V-bind指令

V-bind指令用于绑定Html元素，可以动态渲染Html元素的样式。

<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})
</script>

这是内联样式，在<script>标签中可以为样式赋值。

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

在这里isActive的值决定了Active的样式是否在界面上显示。

3.V-on指令

这是一个监听指令，类似于onclick方法，点击事件可以简写为@click=“方法名”。还可以添加事件修饰符来增加事件的触发方法。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

4.V-for指令

V-for是循环指令，需要以site in sites形式的特殊语法，sites是数组，site是数组元素迭代的别名。

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>