vue的模板语法

最新推荐文章于 2022-09-02 19:59:19 发布

mengqiu123

最新推荐文章于 2022-09-02 19:59:19 发布

阅读量156

点赞数

分类专栏： vue 文章标签： vue的模板语法

本文链接：https://blog.csdn.net/mengqiu123/article/details/100050245

版权

vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

双大括号语法书写形式：

<div id="app">
<p>{{ str }} </p><!--str -->
<p>{{ num }} </p><!--100 -->
<p>{{ bool?'true':'false' }} </p><!--true -->
<p>{{ bool&&'true'||'false' }} </p><!--三目运算符的另一种高级写法,输出:true -->
<p>{{ nul&&'null'||'unnull' }} </p><!--null -->
<p>{{ und && 'undefined' || '520' }} </p><!--520 -->
<p>{{ arr[0] }} </p><!--1 -->
<p>{{ obj.name  }} </p><!--yyb -->
<p>{{ console.log( '1902' ) }} </p><!--会报错 -->
<p>{{ alert( 'hello world' ) }} </p><!--会报错 -->
<p>{{ (function(){ return 'hello world'})()}} </p><!--hello world -->
<p>{{ msg.split('').reverse().join('') }} </p><!--sj.euv olleh -->

由上面的代码得知vue模板不支持console.log和alert的输出，
模板的属性值可以直接写js语并且属性中的数据相当于全局变量
Vue想在HTML中使用自己的属性并且要和他的语法和数据结合可以使用如下形式
`

    <html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> 指令 </title>
</head>
<body>
  <div id="app">
    <p v-html="msg"></p>
    <p v-html="xml"> </p>
    <p v-text="msg"> </p>
    <p v-text="xml"> </p>
    <img v-bind:src="src" alt="">
    <img :src="src" alt="">
  </div>

<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello Vue.js',
      xml: '<h3> XML类型数据 </h3>',
      src: 'https://www.baidu.com/img/bd_logo1.png'
    }
  })
</script>
</body>
</html>`

Vue的这种带 v 标志称为指令
Vue支持js的基础数据类型和引用数据类型，支持表达式和三目运算符，特殊数据类型比如说null和undefined是不会显示的。
挂载在window身上的全局属性我们都不能用。
支持逻辑判断支持运算符也同样支持短路原则

Document

<h3> 条件渲染 - 单路分支 </h3>
<p v-if="flag"> A </p>


<h3> 条件渲染 - 双路分支 </h3>
<p v-if="flag"> A </p>
<p v-else=""> B </p>


<h3> 条件渲染 - 多路分支 </h3>
<p v-if="type === '美食'"> 美食 </p>
<p v-else-if=" type === '游戏' "> 游戏 </p>
<p v-else=""> 睡觉 </p>

<h3> 条件展示 </h3>

<p v-show=" showFlag "> 条件展示 </p>