[JavaScript知识库]Vue模板的使用，vue中使用js表达式

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>