vue模板语法（上）

vue的模块语法今天有四个部分插值，过滤器，监听器，还有指令

html字符串渲染：在vue里面定义一个属性，在属性里面插入<span style="color: red;">红了</span>再用以下代码<div v-html="htmlStr"></div>即可让字体变红

v-bind：属性绑定定义一个属性<input type="text" name="" id="" :value="age" /> 再value前面加上：也可以加上v-bind 即可调用age里面的值

分支：v-if v-elseif v-else 可以对属性进行判断‘

                <h3>分支</h3>
                <div v-if="score>90">A</div>
                <div v-else-if="score>80">B</div>
                <div v-else-if="score>70">C</div>
                <div v-else="">D</div>
                <input type="text" v-model="score" />

v-show指令：

分清楚v-if跟v-show的区别
v-if：控制的是标签是否打印
v-show：控制的是标签的样式

调用代码：<div v-show="flag">1234</div>

v-for指令

data1:[1,3,6,9,14],
            data2:[{
                id:1,
                name:'123',
                
            },
            {
                id:2,
                name:'4',
                
            },
            {
                id:3,
                name:'24',
                
            }] ,
            evname:'click'
        },

定义属性

然后再用v-for调用

    <h3>V-for指令</h3>
                <div v-for="item,index in data1 ">
                   {{item}}~{{index}}        <br />
                </div>
          <hr />
                    <div v-for="item,index in data2 ">
                        {{item.id}}~{{item.name}}~{{index}}        <br />
                    </div>

结果：

动态传参事件调用：

<button v-on:[evname]="xxx">动态传参事件调用</button>
<input type="text" v-model="evname" />

    evname:'click'

结果：

        <li>
                <h3>局部过滤的注册</h3>
                {{msg}}
                {{msg|a}}
                {{javaxl|a}}
            </li>

然后就是局部过滤器

    filters:{
            //a是过滤器的名字,后面是过滤器的作用
            'a':function(v){
                console.log(v);
                return v.substring(0,16);
            },
            'b':function(v){
                console.log(v);
                return v.substring(5,10);
            }
        }
    })

过滤的方法定义

结果：

完整代码：

监听属性：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <title></title>
            <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
        </head>
        <body>
            <div id="app">
                <li>
                <h3>计算属性</h3> 
                单价<input v-model="price" />
                数量<input v-model="num" />
               总价{{total}}
                 </li>
                 
                 <li>
                     <h3>监听属性</h3>
                     km:<input v-model="km" />
                     m:<input v-model="m" />    
                 </li>
            </div>
        </body>
        <script type="text/javascript">
            // 作用将vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
            // 边界不能有兄弟标签 边界一定是根标签
            new Vue({
                el:'#app' ,
            
                data:{
                    price:18,
                    num:1,
                    km:1,
                    m    :    1000
                },
                computed:{
                    total(){
                        return parseInt(this.price)*parseInt(this.num);
                    },
                
                },
                watch:{
                    km(v){
                        this.m=v*1000
                    },
                    m(v){
                        this.km=v/1000
                    }
                }
            })
        </script>
    </html>

过滤器：

<!!DOCTYPE >
<html>

<head>
    <meta charset="utf-8" />
    <title>vue的指令案例</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>
                <h3>局部过滤的注册</h3>
                {{msg}}
                {{msg|a}}
                {{javaxl|a}}
            </li>
            <li>
                <h3>局部过滤器的串联</h3>
                {{javaxl|a|b}}
                
            </li>
            <li>
                <h3>全局过滤器</h3>
                {{javaxl|c}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.filter('c',function(v){
          console.log(v);
          return v.substring(3,10);
    })
    // 作用将vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
    // 边界不能有兄弟标签 边界一定是根标签
    new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!!',
            javaxl:'www.javaxl.com'
        
            
            
        },
        filters:{
            //a是过滤器的名字,后面是过滤器的作用
            'a':function(v){
                console.log(v);
                return v.substring(0,16);
            },
            'b':function(v){
                console.log(v);
                return v.substring(5,10);
            }
        }
    })
</script>

</html>

插值：

<!!DOCTYPE >
<html>

<head>
    <meta charset="utf-8" />
    <title>vue的指令案例</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>

                <h3>分支</h3>
                <div v-if="score>90">A</div>
                <div v-else-if="score>80">B</div>
                <div v-else-if="score>70">C</div>
                <div v-else="">D</div>
                <input type="text" v-model="score" />

            </li>
            <li>
                <h3>V-SHOW指令</h3>
                <!-- 分清楚v-if跟v-show的区别
              v-if：控制的是标签是否打印
              v-show： 控制的是标签的样式-->
                <div v-show="flag">1234</div>

            </li>
            <li>
                <h3>V-for指令</h3>
                <div v-for="item,index in data1 ">
                   {{item}}~{{index}}        <br />
                </div>
          <hr />
                    <div v-for="item,index in data2 ">
                        {{item.id}}~{{item.name}}~{{index}}        <br />
                    </div>
                    
            </li>
            <li>
                            <h3>动态传参事件调用</h3>
                        <button v-on:[evname]="xxx">动态传参事件调用</button>
                        <input type="text" v-model="evname" />
            
                        </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    // 作用将vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
    // 边界不能有兄弟标签 边界一定是根标签
    new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!!',
            score: 88,
            flag: false,
            data1:[1,3,6,9,14],
            data2:[{
                id:1,
                name:'123',
                
            },
            {
                id:2,
                name:'4',
                
            },
            {
                id:3,
                name:'24',
                
            }] ,
            evname:'click'
        },
        methods:{
            xxx(){
                console.log("xxx被调用")
            }
        }
    })
</script>

</html>

指令：

<!!DOCTYPE >
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>

                <h3>文本</h3>
                {{msg}}
            </li>
            <li>

                <h3>html字符串渲染</h3>
                <div v-html="htmlStr"></div>
            </li>
            <li>

                <h3>v-bind属性绑定指令</h3>
                <input type="text" name="" id="" value="22" />
                <input type="text" name="" id="" :value="age" />


            </li>
            <li>

                <h3>表达式</h3>
          {{str.substr(0,6).toUpperCase()}}
          {{ number + 1 }}
          {{ ok ? 'YES' : 'NO' }}
          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    // 作用将vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
    // 边界不能有兄弟标签 边界一定是根标签
    new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!!',
            htmlStr: '<span style="color: red;">红了</span>',
            age: 23,
            str:'https//www.baidu.com',
            number:6,
            ok:true,
            id:24
        }
    })
</script>

</html>

posted @ 2019-08-19 19:36 WhM4c 阅读(187) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

WhM4c

vue模板语法（上）

公告