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

7_35Durant

已于 2024-07-10 21:19:08 修改

阅读量256

点赞数 7

文章标签： vue.js 前端 javascript

于 2024-06-22 20:49:34 首次发布

本文链接：https://blog.csdn.net/Kevin7_35Durant/article/details/139885366

版权

内容渲染

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

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

<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代码

<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变量的值


<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元素，常用

<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>

属性绑定指令

操作class

v-bind可以简写为:

语法：

对象里面的类的值如果是true就有这个类，否则就没有
<div :class="{类名1:布尔值,类名2:布尔值,类名3:布尔值}"></div>
数组里面的类会添加到这个盒子上
<div :class="{"类名1","类名2","类名3"}"></div>

<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的值渲染到超链接上

操作style

语法：

<div :style="{CSS属性名1:CSS属性值,CSS属性2:CSS属性值}"></div>

7_35Durant

关注

7
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue-内容渲染，属性渲染指令

在Vue中渲染元素，用双花括号{{}}的语法进行插值，称之为插值表达式。由于用双花括号无法解析标签元素,它只会将它当作damn变量的值。两种方式效果都是一样的，会将link的值渲染到超链接上。v-html:会解析html元素，常用。v-text:不会解析标签，比较少用。双花括号会渲染hi里面的值。同时它也能执行js代码。
复制链接

扫一扫