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

news2024/12/23 12:18:01

内容渲染

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

属性绑定指令

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