Vue指令v-text

目录

  • 一、Vue中的v-text指令是什么?
  • 二、v-text指令内部支持写表达式。

一、Vue中的v-text指令是什么?

v-text指令用于设置标签的文本值(textContent)。

二、v-text指令内部支持写表达式。

注意:v-text指令的默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。
注意:v-text指令内部写表达式时需要用单引号,正则表达式可以用双引号/单引号。
1、案例源代码如下:

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
  <div id="appid">
    
    <h1 v-text = "'替换全部内容:'+school">{{"双引号表达式:"+person}}h1>
    <hr>
    
    <h1 v-text = "'单引号表达式:'+school">h1>
    <h1>{{"双引号表达式:"+school}}h1>
    <h1>{{'单引号表达式:'+school}}h1>
  div>
  <script>
    var app = new Vue({
      el: '#appid',
      data: {
        school: "振华中学",
        person: "慕斯"
      }
    })
  script>
body>

html>

2、代码执行效果如下:
Vue指令v-text_第1张图片

你可能感兴趣的:(Vue2.x,vue.js,前端,经验分享)