9 插值表达式 v | 您所在的位置:网站首页 › v-bind简写 › 9 插值表达式 v |
[基础]插值表达式和v-bind数据绑定场景插值表达式是什么?插值表达式输出html标签 v-html指令插值表达式只作一次渲染 v-once插值表达式中是可以使用JS表达式的v-bind指令的使用场景 通过前两节内容终于学完了Vue3.x中的生命周期函数了,因为这套教程默认你是没有Vue2.x的基础的,所以就不讲解Vue2和Vue3生命周期的区别了,你只要记住Vue3的8个生命周期就可以了。 这节我们主要学习两个模板语法:插值表达式 和 v-bind 的使用。 插值表达式是什么?我以前在教程中经常说的字面量,其实正确叫法应该叫做插值表达式,当然我们公司大部分还是叫字面量的,也就是我们经常看到的 {{xxxx}} 这样的东西。 我们复制上节的代码,新建一个Demo9.html,然后去掉生命周期相关的内容,这样就变成了一个简单的Vue代码。 Demo7 const app = Vue.createApp({ data() { return { message: 'mybj123.com' } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com" } }, template: "{{message}}" }) const vm = app.mount("#app")这时候我们看到在template属性中的 {{message}} 就是插值表达式。 也就是说利用这种形式,可以使用data中的变量,展示在模板中。 如果我想在变量里,编写一些html的标签,然后输出展现在页面中,这时候会出现点小问题。 我们先修改代码,看看问题所在。例如在message中加入标签。 return { message: 'mybj123.com' }这时候如果什么都不做,直接输出,你在浏览器中看到的结果就是下面的样子。 mybj123.com这并不是你想要的结果,这时候需要使用v-html的标签解决这个问题。 把template属性的部分改成下面的样子。需要注意的是这里要改成"`"符号,否则不能使用双引号这种形式 template: ` `这时候再预览,就可以看到浏览器中的字变成了斜体。 现在这种插值表达式,是跟着data中的数据一起变化的,也就是我们常说的数据双向绑定。 但是如果我希望一个插值表达式,只有在第一次渲染取data中的值,而以后不再跟随data变化,这时候就要用到v-once指令。 先来看一下目前这种代码,我们为 h2 标签,加入相应事件 handleItemClick,代码如下。 template: ` `这时候在浏览器中可以看到,我们每点击一次 h2 标签,message 的值都是变化的。 再改写一下代码。 template: ` `加入了 v-once 后,无论 data 中的数据如何变化,模板也不会再次重新渲染了,这就是 v-once 的变化。 Demo7 const app = Vue.createApp({ data() { return { message: 'willem' } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com" } }, template: ` ` }) const vm = app.mount("#app") 插值表达式中是可以使用JS表达式的其实在插值表达式中是可以使用JS表达式的,最常用的表达式是三元运算符。 比如下面这样的代码也是可以的。 我们在data中新声明一个变量count,用三元运算符判断是否是大于2,如果大于2显示大,小于2显示小,编写代码如下: const app = Vue.createApp({ data() { return { message: 'mybj123.com', count: 5 } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com" } }, template: ` {{count>2?'大':'小'}}` }) const vm = app.mount("#app")当然你也可以使用一些简单的表达式,比如下面这些样子的JS表达式。 {{'mybj123'+'.com'}} {{1+2}} Demo7 const app = Vue.createApp({ data() { return { message: 'mybj123.com', count: 5 } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com" } }, template: ` {{count>2?'大':'小'}} {{'mybj123'+'.com'}} {{1+2}}` }) const vm = app.mount("#app")这些形式的表达式都是可以的,但是如果你想用 if 语句,就是不可以的,因为只能用JS表达式而不能用语句。 v-bind指令的使用现在我们给 h2 标签加入一个 title 属性,属性的值也想使用 message。代码如下: `这时候浏览器中鼠标放上时显示的确实 message 这个单词,而并没有出现我们想要的结果。 这时候就可以使用 v-bind 标签了。 写成下面的样式就可以了。 v-bind:title="message"现在来总结一下,本文我们先学习了插值表达式和一些特殊情况的用法,从而引出了v-html指令、v-once指令和在插值表达式中使用JS表达式,然后又学习了v-bind指令。 Demo7 const app = Vue.createApp({ data() { return { message: 'mybj123.com' } }, methods: { handleItemClick() { this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com" } }, template: ` ` }) const vm = app.mount("#app")
|
CopyRight 2018-2019 实验室设备网 版权所有 |