Vue模板的使用，vue中使用js表达式

最新推荐文章于 2023-08-30 18:43:13 发布

大白菜程序猿

最新推荐文章于 2023-08-30 18:43:13 发布

阅读量628

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_50641264/article/details/126086701

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.v-属性使用方法和需要注意的点

<template>
  <div class="hello">
    <h3>学习Vue:模板语法</h3>
    <p>{{ message}}</p>
    <div>{{ rawHtml }}</div>
    <div v-html="rawHtml"> </div>
    <div v-bind:id="dynamicId">1</div>
    <!-- v-bind 可以简写成 ： -->
    <div :id="dynamicId">1</div>

  </div>
</template>

<script>
export default {
  // innerHtml:渲染标签

  //innerText:渲染文本

  name:'HelloWorld',
  data() {
    return{
      message:"学习Vue",
      rawHtml:" <a href='http://www.baidu.com'>百战</a> ",
      dynamicId:10001
    }
  }
}
</script>

a.v-bind简写方法

 	<div v-bind:id="dynamicId">1</div>
    <!-- v-bind 可以简写成 ： -->
    <div :id="dynamicId">1</div>

2.Vue中使用js表达式

<p>{{ num + 10 }}</p>
<p>{{ flag ? "孙猴子" : "傻猴子" }}</p>

详细代码

<template>
  <div class="hello">
    <h3>学习Vue:模板语法</h3>
    <p>{{ message}}</p>
    <div>{{ rawHtml }}</div>
    <div v-html="rawHtml"> </div>
    <div v-bind:id="dynamicId">1</div>
    <!-- v-bind 可以简写成 ： -->
    <div :id="dynamicId">1</div>
    
    <!-- vue中使用js表达式 -->
    <p>{{ num + 10 }}</p>
    <p>{{ flag ? "孙猴子" : "傻猴子" }}</p>

  </div>
</template>

<script>
export default {
  // innerHtml:渲染标签

  //innerText:渲染文本

  name:'HelloWorld',
  data() {
    return{
      message:"学习Vue",
      rawHtml:" <a href='http://www.baidu.com'>百战</a> ",
      dynamicId:10001,
      num:10,
      flag:true
    }
  }
}
</script>