4.Vue基础指令

it2023-01-08  57

1. 基础指令

指令解释v-text等价于插值表达式 更新元素是 textContentv-html此标签使用innerHTML来更新,能解析htmlv-pre用于限定当前标签内的vue语法不被执行v-once限制当前标签内的vue语法只执行一次

2. 代码

<!DOCTYPE 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>vue基础指令</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <!--v-text等价于插值表达式 更新元素是 textContent --> <p>{{msg+"123123"}}</p> <p v-text="'11111'+msg"></p> <hr/> <!--v-html 更新元素是 innerHTML --> <p v-html="msg"></p> <!-- v-pre 用于限定当前标签内的vue语法失效--> <p v-pre>{{msg}},<span v-text="msg+'------'"></span></p> <hr/> <!-- v-once 当前标签内的vue语法只执行一次--> <p v-once>{{msg}}</p> </div> </body> <script> let vm=new Vue({ el:"#app", data:{ msg:"我是msg" } }); </script> </html>

3. 运行结果

最新回复(0)