它不是完全的js的解析指令, 须要与其它语法组成一条完全的语句。

&lt;template> <div> <!--标签体文本中的{{js表达式}},动态显示文本script中的变量contentText的值--> <p>正序:{{contentText}}</p> <!--可以利用该变量身上的一些语法来操作改变呈现出来的值--> <p>倒序:{{contentText.split('').reverse().join('')}}</p> <!--可以利用js的||，在contentText变量的值为null、''空字符串、等时，显示||右边的值 --> <p>javaScript或{{contentText || 'contentText无值时显示'}}</p> <p>javaScript或{{contentTextFlag || 'contentText无值时显示'}}</p> <!--可以利用javaScript中的三元表达式 来判断呈现出来的值--> <p>三元表达式:{{contentTextFlag ? contentText : 'contentText值为flase时显示'}}</p> <!--可以用来显示js的韶光数据--> <p>{{new Date()}}</p> </div></template><script lang="ts">import { defineComponent, ref } from "vue";// 注：此处利用的vue3.0 版本的语法export default defineComponent({ name: "组件名", setup() { const contentTextFlag = ref(false) const contentText = ref('这是一行笔墨') return { contentTextFlag, contentText } }})</script>页面呈现结果:

jsp中使用vue不解析变量vue 在页面模板中应用js变量 Bootstrap

vue3.2及以上版本的语法, setup语法糖：

<template> <div> <!--标签体文本中的{{js表达式}},动态显示文本script中的变量contentText的值--> <p>正序:{{contentText}}</p> <!--可以利用该变量身上的一些语法来操作改变呈现出来的值--> <p>倒序:{{contentText.split('').reverse().join('')}}</p> <!--可以利用js的||，在contentText变量的值为null、''空字符串、等时，显示||右边的值 --> <p>javaScript或{{contentText || 'contentText无值时显示'}}</p> <p>javaScript或{{contentTextFlag || 'contentText无值时显示'}}</p> <!--可以利用javaScript中的三元表达式 来判断呈现出来的值--> <p>三元表达式:{{contentTextFlag ? contentText : 'contentText值为flase时显示'}}</p> <!--可以用来显示js的韶光数据--> <p>{{new Date()}}</p> </div></template><script lang="ts" setup>import { ref } from "vue";// 注：此处利用的vue3.2及以上版本的语法 setup语法糖const contentTextFlag = ref(false)const contentText = ref('这是一行笔墨')</script>vue2版本的语法：

<template> <div> <!--标签体文本中的{{js表达式}},动态显示文本script中的变量contentText的值--> <p>正序:{{contentText}}</p> <!--可以利用该变量身上的一些语法来操作改变呈现出来的值--> <p>倒序:{{contentText.split('').reverse().join('')}}</p> <!--可以利用js的||，在contentText变量的值为null、''空字符串、等时，显示||右边的值 --> <p>javaScript或{{contentText || 'contentText无值时显示'}}</p> <p>javaScript或{{contentTextFlag || 'contentText无值时显示'}}</p> <!--可以利用javaScript中的三元表达式 来判断呈现出来的值--> <p>三元表达式:{{contentTextFlag ? contentText : 'contentText值为flase时显示'}}</p> <!--可以用来显示js的韶光数据--> <p>{{new Date()}}</p> </div></template><script lang="js">// 如果用到ts 可以将便签改为<script lang="ts">export default ({ data() { return { contentTextFlag: false, contentText: '这是一行笔墨' } },})</script>