002.Vue3入门,使用模板语法的一些高级功能
1、代码如下:
<template> <h3>模板语法</h3> <p>{{ msg }}</p> <p>{{ msg_cn }}</p> <p>{{ number + 1 }}</p> <p>{{ ok ? 'Yes' : 'No' }}</p> <p>{{ message.split("").reverse() }}</p> <p>{{ message.split("").reverse().join("") }}</p> <a href='https://www.baidu.com'>访问百度</a> <p>{{ rawHtml }}</p> <p v-html="rawHtml"></p> </template> <script> export default { data() { return { msg: "Hello World!", msg_cn: "你好,世界", number: 10, ok: true, message: "大家好", rawHtml: "<a href='https://www.baidu.com'>访问百度</a>" } } } </script> <style> </style>
2、效果如下: