9 插值表达式 v-on:clickv-htmlv-bind:title
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了9 插值表达式 v-on:clickv-htmlv-bind:title相关的知识，希望对你有一定的参考价值。
[基础]插值表达式和v-bind数据绑定
场景
通过前两节内容终于学完了Vue3.x中的生命周期函数了，因为这套教程默认你是没有Vue2.x的基础的，所以就不讲解Vue2和Vue3生命周期的区别了，你只要记住Vue3的8个生命周期就可以了。
这节我们主要学习两个模板语法：插值表达式 和 v-bind 的使用。
插值表达式是什么？
我以前在教程中经常说的字面量，其实正确叫法应该叫做插值表达式，当然我们公司大部分还是叫字面量的，也就是我们经常看到的 xxxx 这样的东西。
我们复制上节的代码，新建一个Demo9.html，然后去掉生命周期相关的内容，这样就变成了一个简单的Vue代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo7</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
message: 'mybj123.com'
,
methods:
handleItemClick()
this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
,
template: "<h2 v-on:click='handleItemClick'>message</h2>"
)
const vm = app.mount("#app")
</script>
</html>
这时候我们看到在template属性中的 message 就是插值表达式。
也就是说利用这种形式，可以使用data中的变量，展示在模板中。
插值表达式输出html标签 v-html指令
如果我想在变量里，编写一些html的标签，然后输出展现在页面中，这时候会出现点小问题。
我们先修改代码，看看问题所在。例如在message中加入标签。
return
message: '<i>mybj123.com</i>'
这时候如果什么都不做，直接输出，你在浏览器中看到的结果就是下面的样子。
<i>mybj123.com</i>
这并不是你想要的结果，这时候需要使用v-html的标签解决这个问题。
把template属性的部分改成下面的样子。需要注意的是这里要改成"`"符号，否则不能使用双引号这种形式
template: `<h2 v-html="message"> </h2>`
这时候再预览，就可以看到浏览器中的字变成了斜体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo7</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
message: '<i>mybj123.com</i>'
,
template: `<h2 v-html="message"> </h2>`
)
const vm = app.mount("#app")
</script>
</html>
插值表达式只作一次渲染 v-once
现在这种插值表达式，是跟着data中的数据一起变化的，也就是我们常说的数据双向绑定。
但是如果我希望一个插值表达式，只有在第一次渲染取data中的值，而以后不再跟随data变化，这时候就要用到v-once指令。
先来看一下目前这种代码，我们为 h2 标签，加入相应事件 handleItemClick，代码如下。
template: `<h2 v-on:click="handleItemClick" v-html="message"> </h2>`
这时候在浏览器中可以看到，我们每点击一次 h2 标签，message 的值都是变化的。
再改写一下代码。
template: `<h2
v-on:click="handleItemClick"
v-html="message"
v-once
> </h2>`
加入了 v-once 后，无论 data 中的数据如何变化，模板也不会再次重新渲染了，这就是 v-once 的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo7</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
message: '<i>willem</i>'
,
methods:
handleItemClick()
this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
,
template: `<h2
v-on:click="handleItemClick"
v-html="message"
v-once
> </h2>`
)
const vm = app.mount("#app")
</script>
</html>
插值表达式中是可以使用JS表达式的
其实在插值表达式中是可以使用JS表达式的，最常用的表达式是三元运算符。
比如下面这样的代码也是可以的。
我们在data中新声明一个变量count，用三元运算符判断是否是大于2，如果大于2显示大，小于2显示小，编写代码如下：
<script>
const app = Vue.createApp(
data()
return
message: '<i>mybj123.com</i>',
count: 5
,
methods:
handleItemClick()
this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
,
template: `<h2
v-on:click="handleItemClick"
v-html="message"
v-once></h2>
<div>count>2?'大':'小'</div>`
)
const vm = app.mount("#app")
</script>
当然你也可以使用一些简单的表达式，比如下面这些样子的JS表达式。
<div>'mybj123'+'.com'</div>
<div>1+2</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo7</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
message: '<i>mybj123.com</i>',
count: 5
,
methods:
handleItemClick()
this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
,
template: `<h2
v-on:click="handleItemClick"
v-html="message"
v-once></h2>
<div>count>2?'大':'小'</div>
<div>'mybj123'+'.com'</div>
<div>1+2</div>`
)
const vm = app.mount("#app")
</script>
</html>
这些形式的表达式都是可以的，但是如果你想用 if 语句，就是不可以的，因为只能用JS表达式而不能用语句。
v-bind指令的使用
现在我们给 h2 标签加入一个 title 属性，属性的值也想使用 message。代码如下：
<h2
v-on:click="handleItemClick"
v-html="message"
v-once
title="message"
> </h2>`
这时候浏览器中鼠标放上时显示的确实 message 这个单词，而并没有出现我们想要的结果。
这时候就可以使用 v-bind 标签了。
写成下面的样式就可以了。
v-bind:title="message"
现在来总结一下，本文我们先学习了插值表达式和一些特殊情况的用法，从而引出了v-html指令、v-once指令和在插值表达式中使用JS表达式，然后又学习了v-bind指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo7</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp(
data()
return
message: '<i>mybj123.com</i>'
,
methods:
handleItemClick()
this.message = this.message == 'mybj123.com' ? "willem笔记" : "mybj123.com"
,
template: `<h2
v-on:click="handleItemClick"
v-html="message"
v-bind:title="message"
> </h2>`
)
const vm = app.mount("#app")
</script>
</html>
以上是关于9 插值表达式 v-on:clickv-htmlv-bind:title的主要内容，如果未能解决你的问题，请参考以下文章