跳至主要內容

常用指令

村雨遥原创大约 3 分钟Vue 3 系列Vue

常用指令

插值

文本

要进行文本部分替换,可以用 {{}} 将变量元素括起来;

<div id = "app">
    {{message}}
</div>
// Vue实例
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue'
    }
})

要进行文本全部替换,则可以用 v-text 来进行,比如下面的“测试”将会被 message 的内容所替代;

<div id = "app">
	<h2 v-text="message">测试</h2>
</div>
var app = new Vue({
    el: "#app",
    data: {
        message: "公众号:村雨遥"
    }
})

原始 HTML

双大括号会将数据解释为普通文本,但如果我们要插入原始的 HTMl 内容,此时就需要使用 v-html 指令;

<div id="app">
    <p v-html="rawHtml">
    </p>
</div>
var app = new Vue({
    el: "#app",
    data: {
        rawHtml: "<span style="color:red">内容标红</span>"
    }
})

绑定元素属性

要实现给元素绑定属性,可以使用 v-bind 指令,其完整写法是 v-bind:属性名="表达式",简写则可以直接省略掉 v-bind,只保留 :属性名="表达式",但它属于单向绑定;

<div id = "app">
    <h2 v-bind:title="message">Vue In Action!</h2>
</div>
var app = new Vue({
    el: "#app",
    data: {
        message : "Vue 实战!"
    }
})

条件与循环

条件指令,也就是我们日常开发中所使用的 if,用 v-if 指令来进行绑定;

<div id="app">
    <p v-if="found">
         我被你发现了!
    </p>
</div>
var app = new Vue({
    el: "app",
    data: {
        found: true
    }
})

此外,还可以使用 v-else 指令来表示 v-ifelse 块,它必须紧跟在 v-ifv-else-if 元素的后面,否则它将不会被识别;

<div v-if="type === 'A'">
  The answer is A
</div>
<div v-else-if="type === 'B'">
  The answer is B
</div>
<div v-else-if="type === 'C'">
  The answer is C
</div>
<div v-else>
  The answer is D
</div>

循环指令,也就是我们经常用到的 for 循环,用 v-for 指令来进行绑定,根据数据生成列表结构,其语法是 (item, index) in 数据

<div id="app">
    <ul>
        <li v-for="num in nums">
        	{{num.text}}
        </li>
    </ul>
</div>
var app = new Vue({
    el: "#app",
    data: {
        nums: [1, 2, 4]
    }
})

处理用户输入

要进行用户与应用之间的交互,可以使用 v-on 指令来添加事件监听器,通过它来调用 Vue 实例中定义的方法,此外为了减少开发过程中的代码量,我们还可以使用 @ 来替换 v-on ,它俩可以达到同样的效果;

<div id = "app">
    <p>
        {{message}}
    </p>
    <button v-on:click="reverseMessage">
    <!-- <button @click="revuerseMessage"> -->
        消息反转
    </button>
</div>
var app = new Vue({
    el: "#app",
    data: {
        message: "wechat cunyu1943"
    },
    methods: {
        reverseMessage:function(){
            this.message = this.message.split(' ').reverse().join(' ')
        }
    }
})

为了处理不去处理 DOM 事件细节,而只用纯粹的数据逻辑来进行操作,Vue 中为 v-on 又提供了 事件修饰符,常见时间修饰符如下:

事件修饰符说明
.stop表示阻止事件继续传播
.prevent表示时间不再重载
.capture表示使用事件捕获模式
.self表示是当前元素自身时触发处理函数
.once表示事件只触发一次
.passive表示事件立即触发

同时,为了实现表单输入和应用状态之间的双向绑定,我们可以使用 v-model 指令;

通过 v-model 指令,能够便捷的设置和获取表单元素的值,而且绑定的数据会和表单元素值相关联;

<div id="app">
    <p>你的公众号是:{{ message }}</p>
    更新你的公众号:<input type="text" v-model="message">
</div>
var app = new Vue({
    el: "#app",
    data: {
        message: "村雨遥"
    }
})

元素的显示与隐藏

要实现元素的显示与隐藏,我们可以通过 v-show 这个指令,它会根据表达式的真假,来切换元素的显示和隐藏状态。

<div id="app">
    <img src="https://gitee.com/cunyu1943/images/raw/master/ImgsUbuntu/20200510234310.png" v-show="isShow">
</div>
var app = new Vue({
    el: "#app",
    data: {
        isShow: true
    }
})
上次编辑于:
贡献者: 村雨遥