Vue.js-v-text指令(类似于innerText)

释放双眼,带上耳机,听听看~!
指令:标签上的一个属性(vue定义的属性)v-text:类似于innerText

直通车

用法:v-text=”一句话表达式(js)”

一句话表达式:
  1.  变量
  2. 运算  (三元表达式  boolean值?true的结果:false结果    )
功能:全局替换当前标签的文本内容为v-text的值

简写模式: {{}}  插值语法
  •  用法:插值语法标签的文本区域  {{一句话表达式(js)}}
  • 功能:部分替换标签内文本内容
  • 实际使用主体是插值语法
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-text="msg">123456</div>
      <div>123456{{msg}}</div>
      <!-- <div v-text="if(true){return msg}"></div> -->
      <div>{{1+1}}</div>
      <div v-text="false?'true的结果':'false的结果'"></div>
      <div>{{"姓名:"+obj.name}}</div>
    </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "这是一个寂寞的天,下着有些伤心的雨",
          obj: {
            name: "张三",
          },
        },
      });
    </script>
  </body>
</html>​
内容投诉

人已赞赏
JavaScriptNode

Node-知识点 - knex模块基本使用[重要]

2020-8-27 18:30:58

JavaScriptVue

Vue.js-v-html指令(类似innerHTML)

2020-8-31 19:43:29

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索