Class 与 Style 绑定
在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
绑定 HTML Class
<!-- 对象语法 active 这个 class 存在与否将取决于 data property isActive是否为true --> <div :class="{ active: isActive }"></div> <div class="static" :class="{ active: isActive, 'text-danger': hasError }" ></div> <div :class="classObject"></div> <!-- 数组语法 --> <div :class="[activeClass, errorClass]"></div> <div :class="[isActive ? activeClass : '', errorClass]"></div> <div :class="[{ active: isActive }, errorClass]"></div> <!-- 在组件上使用 --> <my-component :class="{ active: isActive }"></my-component>
绑定内联样式
<!-- 对象语法 --> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> <div :style="styleObject"></div> <!-- 数组语法 --> <div :style="[baseStyles, overridingStyles]"></div> <!-- 多重值 只会渲染数组中最后一个被浏览器支持的值--> <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
条件渲染和列表渲染
<!-- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 --> <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no</h1> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <div v-if="type === 'A'">A</div> <div v-else-if="type === 'B'">B</div> <div v-else-if="type === 'C'">C</div> <div v-else>Not A/B/C</div> <!-- 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display 属性。 --> <h1 v-show="ok">Hello!</h1> <!-- 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此, 如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。 --> <!-- v-for 指令 数组--> <ul id="array-rendering"> <li v-for="item in items">{{ item.message }}</li> </ul> <ul id="array-with-index"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> <ul> <template v-for="item in items" :key="item.msg"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> <!-- v-for 指令 对象--> <ul id="v-for-object" class="demo"> <li v-for="value in myObject">{{ value }}</li> </ul> <li v-for="(value, name) in myObject">{{ name }}: {{ value }}</li> <li v-for="(value, name, index) in myObject"> {{ index }}. {{ name }}: {{ value }} </li> <!-- v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数。 --> <div id="range" class="demo"> <span v-for="n in 10" :key="n">{{ n }} </span> </div> <!-- 不推荐在同一元素上使用 v-if 和 v-for 当它们处于同一节点,v-if 的优先级比 v-for 更高,这意味着 v-if 将没有权限访问 v-for 里的变量 --> <!-- 这将抛出一个错误,因为“todo” property 没有在实例上定义 --> <li v-for="todo in todos" v-if="!todo.isComplete">{{ todo.name }}</li> <!-- 推荐 --> <template v-for="todo in todos" :key="todo.name"> <li v-if="!todo.isComplete">{{ todo.name }}</li> </template>
事件处理
<!-- 使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件 --> <div id="basic-event"> <button @click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> <!-- 事件处理方法 --> <button @click="greet">Greet</button> <script> Vue.createApp({ data() { return { name: "Vue.js", }; }, methods: { greet(event) { // `methods` 内部的 `this` 指向当前活动实例 alert("Hello " + this.name + "!"); // `event` 是原生 DOM event if (event) { alert(event.target.tagName); } }, }, }).mount("#event-with-method"); </script> <!-- 内联处理器中的方法 --> <div id="inline-handler"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button> </div> <script> Vue.createApp({ methods: { say(message) { alert(message); }, }, }).mount("#inline-handler"); </script> <!-- 原始的 DOM 事件 --> <button @click="warn('Form cannot be submitted yet.', $event)">Submit</button> <script> Vue.createApp({ methods: { warn(message, event) { // 现在可以访问到原生事件 if (event) { event.preventDefault(); } alert(message); }, }, }).mount("#inline-handler"); </script> <!-- 多事件处理器 --> <button @click="one($event), two($event)">Submit</button> <!-- 事件修饰符 --> <!-- 阻止单击事件继续冒泡 --> <a @click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form @submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a @click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form @submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 --> <div @click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div @click.self="doThat">...</div>
原文地址:http://www.cnblogs.com/caroline2016/p/16905703.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性