Vue-内容渲染,属性渲染指令

内容渲染

在Vue中渲染元素,用双花括号{{}}的语法进行插值,称之为插值表达式

双花括号会渲染hi里面的值

html 复制代码
<body>
    <div id="app">
    {{hi}}
    </div>
<script>
  const vm={
    data(){
      return{
        hi:'hello world'
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
</script>
  
</body>

同时它也能执行js代码

html 复制代码
<body>
    <div id="app">
    {{one+1}}
    </div>
<script>
  const vm={
    data(){
      return{
        one:1
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
</script>
  
</body>

对算式进行计算

由于用双花括号无法解析标签元素,它只会将它当作damn变量的值

html 复制代码
​
<body>
    <div id="app">
    {{damn}}
    </div>
<script>
  const vm={
    data(){
      return{
        damn:'<a href="www.csdn.net">csdn</a>'
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
</script>
  
</body>

​

内容渲染指令

v-text:不会解析标签,比较少用

v-html:会解析html元素,常用

html 复制代码
<body>
    <div id="app">
      <!--v-text覆盖掉原先的内容,但并不会解析标签-->
    <p v-text="damn">hello world</p>
    <!--v-text覆盖掉原先的内容,但并不会解析标签-->
    <p v-html="damn">hello world</p>
    </div>
<script>
  const vm={
    data(){
      return{
        damn:'<a href="www.csdn.net">csdn</a>'
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
</script>
  
</body>

属性绑定指令

html 复制代码
<body>
    <div id="app">
      <!--v-bind属性绑定,可以在属性前面只加分号:-->
     <p><a v-bind:href="link">csdn</a></p>
     <a :href="link">csdn</a>
    </div>
<script>
  const vm={
    data(){
      return{
        link:'www.csdn.net'
      }
    }
  }
  const app=Vue.createApp(vm)
  app.mount('#app')
</script>
  
</body>

两种方式效果都是一样的 ,会将link的值渲染到超链接上

相关推荐
liu****2 分钟前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San304 分钟前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
ttyyttemo6 分钟前
Column,rememberScrollState,记住滚动位置
前端
芒果茶叶1 小时前
并行SSR,SSR并行加载
前端·javascript·架构
vortex51 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人1 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine1 小时前
JS Entry和 HTML Entry
前端
用户63310776123661 小时前
Who is a Promise?
前端
用户785127814702 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫2 小时前
JavaScript中的axios
开发语言·javascript·ecmascript