时间：2023-06-07 01:03:02 | 来源：网站运营
时间：2023-06-07 01:03:02 来源：网站运营
vue: html模版：双大括号的深入：
在线咨询
<p>{{ name }}</p><p>{{ name+'123' }}</p><p>{{ sayName() }}</p><script> new Vue({ el: '.app', data: { name: 'aimee', }, methods: { sayName: function() { return 'fang' }, } }) </script>指令的深入: <p><a href="{{ link }}">{{ baidu }}</a></p> <!-- 注意点: vue不会分析字符串里的语法(href属性里的值应是字符串) --> <p><a v-bind:href="link">{{ baidu }}</a></p> <!-- 解决方案: 使用v-bind绑定变量值到属性值,并且省略双大括号 --> <p><a v-bind:href=" baiDu() ">{{ baidu }}</a></p> <!-- 可以写变量和函数 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> new Vue({ el: '.app', data: { link: 'https://www.baidu.com', }, methods: { baiDu: function() { return 'https://www.baidu.com' } } })</script>v-once: data字段的值如果在methods等其他函数中改变，会更着改变之前的结果，如果想在改变之前使用该值可以使用v-once。<p>{{ name }}</p><!-- 被改变 --><p v-once>{{ name }}</p><!-- 在没有改变变量之前使用v-once的使用,可以防止内容的更改 --><p>{{ sayName() }}</p><p v-once>{{ name }}</p><!-- 只能在没改之前使用 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '.app', data: { name: 'aimee' }, methods: { sayName: function() { this.name = 'fang'; // 原本this.name = aimee,但是在这个更改了以后，全局生效，都变成fff return this.name; }, } }) </script> v-html: 如果要在变量中使用html标签插入，直接插入的话,vue只能识别为字符串，所以我们要使用v-html。(但不推荐使用，安全问题)<p>{{ taobao }}</p><!-- 可以直接渲染html标签吗? 不可以的，vue值会把它当做dom节点 --><p v-html="taobao"></p><!-- 如果要渲染html标签，确保安全的话可以使用v-html指令绑定变量即可 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> new Vue({ el: '.app', data: { taobao: '<a href="https://www.taobao.com">淘宝网</a>' } })</script>关键词：
