Vue模板语法-前端板块造梦空间论坛-技术交流-造梦空间论坛

Vue模板语法

Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有
的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。

文本插值

最基本的数据绑定形式是文本插值,它使用的是“Mustache"语法(即双大括号):

<template>
<view>
<h3>{{ msg }}</h3>
</view>
</template>
<script>
export default {
data() {
return {
msg : "造梦空间"
}
},
}
</script>
<template>
  <view>
    <h3>{{ msg }}</h3>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg : "造梦空间"
      }
    },
  }
</script>
<template> <view> <h3>{{ msg }}</h3> </view> </template> <script> export default { data() { return { msg : "造梦空间" } }, } </script>

使用JavaScript表达式

每个绑定仅支持单一表达式,也就是一段能够被求值的JavaScript 代码。一个简单的判断方法是是否可以合法
地写在 retum 后面。

  • 必须要有返回值!
  • 只能单独一行的表达式!
  • 一般不写这个里面。
<template>
<view>
<!-- 造梦空间 -->
<h3>{{ msg }}</h3>
<!-- 11 -->
<p>{{ number+1 }}</p>
</view>
</template>
<script>
export default {
data() {
return {
msg : "造梦空间",
number : 10,
}
},
}
</script>
<template>
  <view>
    <!-- 造梦空间 -->
    <h3>{{ msg }}</h3>
    <!-- 11 -->
    <p>{{ number+1 }}</p>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg : "造梦空间",
        number : 10,
      }
    },
  }
</script>
<template> <view> <!-- 造梦空间 --> <h3>{{ msg }}</h3> <!-- 11 --> <p>{{ number+1 }}</p> </view> </template> <script> export default { data() { return { msg : "造梦空间", number : 10, } }, } </script>

三目运算符

<template>
<view>
<!-- 造梦空间 -->
<h3>{{ msg }}</h3>
<!-- 11 -->
<p>{{ number+1 }}</p>
<!-- 值为TRUE -->
<p>{{ ok ? '值为TRUE' : '值不为TRUE' }}</p>
</view>
</template>
<script>
export default {
data() {
return {
msg : "造梦空间",
number : 10,
ok : true,
}
},
}
</script>
<template>
  <view>
    <!-- 造梦空间 -->
    <h3>{{ msg }}</h3>
    <!-- 11 -->
    <p>{{ number+1 }}</p>
    <!-- 值为TRUE -->
    <p>{{ ok ? '值为TRUE' : '值不为TRUE' }}</p>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg : "造梦空间",
        number : 10,
        ok : true,
      }
    },
  }
</script>
<template> <view> <!-- 造梦空间 --> <h3>{{ msg }}</h3> <!-- 11 --> <p>{{ number+1 }}</p> <!-- 值为TRUE --> <p>{{ ok ? '值为TRUE' : '值不为TRUE' }}</p> </view> </template> <script> export default { data() { return { msg : "造梦空间", number : 10, ok : true, } }, } </script>

其它函数

massage.split("").reverse().join()=切割→转数组→反转顺序

<template>
<view>
<!-- 造梦空间 -->
<h3>{{ msg }}</h3>
<!-- 11 -->
<p>{{ number+1 }}</p>
<!-- 值为TRUE -->
<p>{{ ok ? '值为TRUE' : '值不为TRUE' }}</p>
<!-- 神,滴,远,永,波,小 -->
<p>{{ massage.split("").reverse().join() }}</p>
</view>
</template>
<script>
export default {
data() {
return {
msg : "造梦空间",
number : 10,
ok : true,
massage : "小波永远滴神",
}
},
}
</script>
<template>
  <view>
    <!-- 造梦空间 -->
    <h3>{{ msg }}</h3>
    <!-- 11 -->
    <p>{{ number+1 }}</p>
    <!-- 值为TRUE -->
    <p>{{ ok ? '值为TRUE' : '值不为TRUE' }}</p>
    <!-- 神,滴,远,永,波,小 -->
    <p>{{ massage.split("").reverse().join() }}</p>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        msg : "造梦空间",
        number : 10,
        ok : true,
        massage : "小波永远滴神",
      }
    },
  }
</script>
<template> <view> <!-- 造梦空间 --> <h3>{{ msg }}</h3> <!-- 11 --> <p>{{ number+1 }}</p> <!-- 值为TRUE --> <p>{{ ok ? '值为TRUE' : '值不为TRUE' }}</p> <!-- 神,滴,远,永,波,小 --> <p>{{ massage.split("").reverse().join() }}</p> </view> </template> <script> export default { data() { return { msg : "造梦空间", number : 10, ok : true, massage : "小波永远滴神", } }, } </script>

原始HTML

双大括号将会将数据插值为纯文本,而不是 HTML。若想插入 HTML,你需要使用v-html 指令。

99f95974ca153203

<p v-html="ahtml"></p>
<p v-html="ahtml"></p>
<p v-html="ahtml"></p>

4bd69ab966153305

在这个里面这个v-html 被称作指令。

请登录后发表评论

    没有回复内容

© 造梦空间论坛
❤富强❤