vue href 字符串拼接_Vue 模板的功臣指令

最新推荐文章于 2022-07-14 22:20:11 发布

吴玄熙

最新推荐文章于 2022-07-14 22:20:11 发布

阅读量1.3k

点赞数

文章标签： vue href 字符串拼接

本文链接：https://blog.csdn.net/weixin_42113380/article/details/113578761

版权

Vue 模板中，「指令」犹如一条命令，让 Vue 干啥就干啥，Vue 总是哈腰点头，为模板服务着。

1、v-if、v-else-if、v-else ，活要挑着干

某个 HTML 元素要在指定的条件下才能渲染，v-if、v-else-if 需要指定一个条件，这个条件是一个表达式或者是计算属性，但是不能是过滤器，只有在 truthy 的时候才会渲染。

在 JavaScript 中，truthy(真值)指的是在布尔值上下文中，转换后的值为真(true)的值。所有值都是真值，除非它们被定义为假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)
Vue虚拟实验室 · @ivan

<body>    <div id="app">                <div v-if="state === 0">下载div>        <div v-else-if="state === 1">正在下载div>        <div v-else-if="state === 2">已下载div>        <div v-else="state === 3">下载失败div>                <div v-if="invalid">下载状态异常div>    div>    <script>        const obj = {            el: '#app',            data: function () {                return {                    title: '前端小课',                    state: 5                }            },            computed: {                invalid() {                    return this.state < 0 || this.state > 3;                }            },            filters: {                showState(state) {                    return !(this.state < 0 || this.state > 3);                }            }        }        const vm = new Vue(obj);script>body>

2、遇到重复劳动，聪明点，要想到 v-for

即可渲染数组，也可渲染对象。在数组渲染中有一个 key，可以避免元素复用时数据错误。

<body>    <div id="app">                <p v-for="(title, index) in list" :key="index">{{ title }}p>                <p v-for="(v, k, i) in me">{{ i }} - {{ k }}: {{ v }}p>    div><script>        const obj = {            el: '#app',            data: function () {                return {                    list: ['前端小课','Vue 虚拟实验室','素燕'],                    me: {                        fe: '前端小课',                        vue: 'Vue 虚拟实验室',                        name: '素燕'                    }                }            }        }        const vm = new Vue(obj);script>body>

3、显示隐藏一把好手 v-show

图来自 vue.js 官方：

4、一次就够 v-once

title 变化不会引起 div 元素内容的改变。

<div v-once>{{ title }}div>

5 、我想显示 HTML， v-html

有时候想把 HTML 字符串当做普通的字符串，而有时候却想让 HTML 字符串直接渲染，咋么办？

<p>{{ rawHtml }}p><span v-html="rawHtml">span>

<script>    const obj = {        el: '#app',        data: function () {            return {                rawHtml: '我是 HTML'            }        }    }    const vm = new Vue(obj);script>

6、彼此含情脉脉，形影不离 v-model

双向绑定离不开 v-model，比如输入框输入文字，并实时显示到屏幕上。下面的例子来自：「Vue虚拟实验室 · @两块牛排」。

<div id="app">  <input v-model="message">  <p>{{ message }}p>div><script>var app = new Vue({  el: '#app',  data: {    message: 'Hello'  }})script>

7、要显示啥交给我，v-text

<span v-text="msg">span><span>{{msg}}span>

8 、你要是想动，请告诉我 v-bind

如果想给 HTML 元素动态绑定属性，需要通过 v-bind 指令来实现。比如这节内容让 Class 与 Style 动起来提到的 :class，:style，其实使用的都是 v-bind 指令，如果想动态修改 HTML 元素属性，请使用 v-bind 指令。

<a v-bind:href="link">前端小课a>// 也可以使用缩写：<a :href="link">前端小课a>

9、最近发生了大事，赶快听听 v-on

v-on 主要负责监听事件，事件发生后可以调用 methods 中定义的方法。可以监听到哪些事件呢？通常 HTMLElement 所支持的事件，都能够监听，比如 touchstart、onscroll、load 等事件。如果想阻止事件冒泡，可以使用指令的修饰符。

<div v-on:click="clickMe">点击div>// 也可以缩写<div @click="clickMe">点击div>

总结

本文概括性地说明了各个指令的使用。这些指令都是 Vue 框架自身提供的，其实也可以自定义 Vue 指令。

大家加油！

推荐阅读： 动静结合 · Vue 模板
让 Class 与 Style 动起来

吴玄熙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue href 字符串拼接_Vue 模板的功臣指令

Vue 模板中，「指令」犹如一条命令，让 Vue 干啥就干啥，Vue 总是哈腰点头，为模板服务着。1、v-if、v-else-if、v-else ，活要挑着干某个 HTML 元素要在指定的条件下才能渲染，v-if、v-else-if需要指定一个条件，这个条件是一个表达式或者是计算属性，但是不能是过滤器，只有在truthy的时候才会渲染。在 JavaScript 中，truthy(真...
复制链接

扫一扫

vue href 字符串拼接_Vue 模板的功臣 指令

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

vue href 字符串拼接_Vue 模板的功臣指令