VUE框架指令语法与v-bind实现标签属性内部动态------VUE框架

深碍√TFBOYSˉ_ 2024-02-06 04:54 48阅读 0赞

> ###  ###
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         
>         
>         
>         
>         
>         
>         
>         
>         
>         
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>             
>             <h1 v-if="msg === '123'">v-if测试{
>         {msg}}</h1>
>             
>             
>             <h1 v-once>{
>         {msg}}</h1>
>         </div>
>         <script>
>             // Vue程序
>             new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello Vue"
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> <h1 v-if="msg === '123'">v-if测试\{ \{msg\}\}</h1>
> 
> 
> 
> 
> 
> <h1 v-once>\{ \{msg\}\}</h1>
> 
> </div>
> 
> <script>
> 
> // Vue程序
> 
> new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello Vue"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>Document</title>
>         <script src="../js/vue.js"></script>
>     </head>
>     <body>
>         <div id="app">
>             <h1>{
>         {msg}}</h1>
>             
>             
>             
>             <span v-bind:xyz="msg"></span>
>             
>             <span v-bind:xyz="'msg'"></span>
>             <img v-bind:src="img" :height="height" :width="width">
>             <img :src="img" v-bind:height="height" v-bind:width="width">
>             <input type="text" name="username" :value="un">
>             
>             
>             <a :href="Go">百度</a>
>             
>         </div>
>         <script>
>             // v-bind详解
>             // v-bind参数=表达式
>             // 编译完成后是参数(还是参数)="表达式的执行结果"
>             // 表达式会关联data,当data发生改变,表达式的执行结果就会发生变化
>             // 连带就实现了动态效果
>             new Vue({
>                 el : "#app",
>                 data : {
>                     msg : "Hello",
>                     img : "../../1.jpg",
>                     un : "zhangSan",
>                     height : "30px",
>                     width : "30px",
>                     Go : "http://www.baidu.com"
>                 }
>             });
>         </script>
>     </body>
>     </html>
> 
> <!DOCTYPE html>
> 
> <html lang="en">
> 
> <head>
> 
> <meta charset="UTF-8">
> 
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
> <title>Document</title>
> 
> <script src="../js/vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">
> 
> <h1>\{ \{msg\}\}</h1>
> 
> 
> 
> 
> 
> 
> 
> <span v-bind:xyz="msg"></span>
> 
> 
> 
> <span v-bind:xyz="'msg'"></span>
> 
> <img v-bind:src="img" :height="height" :width="width">
> 
> <img :src="img" v-bind:height="height" v-bind:width="width">
> 
> <input type="text" name="username" :value="un">
> 
> 
> 
> 
> 
> <a :href="Go">百度</a>
> 
> 
> 
> </div>
> 
> <script>
> 
> // v-bind详解
> 
> // v-bind参数=表达式
> 
> // 编译完成后是参数(还是参数)="表达式的执行结果"
> 
> // 表达式会关联data,当data发生改变,表达式的执行结果就会发生变化
> 
> // 连带就实现了动态效果
> 
> new Vue(\{
> 
> el : "\#app",
> 
> data : \{
> 
> msg : "Hello",
> 
> img : "../../1.jpg",
> 
> un : "zhangSan",
> 
> height : "30px",
> 
> width : "30px",
> 
> Go : "http://www.baidu.com"
> 
> \}
> 
> \});
> 
> </script>
> 
> </body>
> 
> </html>