Vue框架——插值表达式与指令

插值运算和指令

Vez’nan

346人浏览 · 2022-08-30 01:46:59

Vez’nan · 2022-08-30 01:46:59 发布

插值表达式{{}}

el的作用是使vm与id为“app”的元素绑定

data中的属性会添加到vm对象上，并赋值给已经绑定的div中的变量，变量名与vm中的属性名相同

<body>
    <div id="app">
        <div>
            {{counter}}
        </div>
    </div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            counter:"hello world"
        }
})
</script>
</body>

在取完id名为app的div中的变量后，不可再添加新变量，但可以修改已有变量的值

插值表达式的括号中可以运行简短的代码

<body>
    <div id="app">
        <div>
            {{counter()+40}}   <!--100-->
            {{20+30}}          <!--50-->
			{{counter2.name}}  <!--jack-->
			{{counter3[2]}}    <!--456-->
        </div>
    </div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            counter:()=>{return 60},
            counter2:{name:"jack"},
			counter3:["aaa","bbb",456]
        }
})
</script>
</body>

指令

v-cloak：在vuejs instance ready 之后,v-clock 属性会被自动去除

<!--解决页面闪烁bug-->
<style>
		div[v-cloak] {
			display: none;
		}
</style>
<body>
<div id="app">
    <div v-cloak>{{counter}}</div>
    <div v-cloak>{{counter2}}</div>
</div>
<script>
var vm=new Vue({
		el:"#app",
		data:{
		counter:"hello world",
		counter2:"<i>hello human</i>"}
        })
</script>
</body>

v-text：用来设置innerText

解决页面闪烁

一开始不设置内容，等加载完成后再写入内容

<!--解决页面闪烁bug-->

<body>
<div id="app">
    <div v-text="counter"></div>
    <div v-text="counter2"></div>
</div>
<script>
var vm=new Vue({
		el:"#app",
		data:{
		counter:"hello world",
		counter2:"<i>hello human</i>"}
        })
</script>
</body>

不能解析html结构

<body>
<div id="app">
    <div v-text="counter"></div>   <!--hello world-->
    <div v-text="counter2"></div>  <!--<i>hello human</i>-->
</div>
<script>
var vm=new Vue({
		el:"#app",
		data:{
		counter:"hello world",
		counter2:"<i>hello human</i>"}
        })
</script>
</body>

v-html：用来设置innerHtml

解决页面闪烁方法同v-text

能解析html结构

<body>
<div id="app">
    <div v-text="counter"></div>   <!--hello world-->
    <div v-text="counter2"></div>  <!--hello human(出现i标签效果)-->
</div>
<script>
var vm=new Vue({
		el:"#app",
		data:{
		counter:"hello world",
		counter2:"<i>hello human</i>"}
        })
</script>
</body>

v-bind：动态绑定

不能显示图片

<body>
<div id="app">
    <img src="counter">
</div>
<script>
var vm=new Vue({
		el:"#app",
		data:{counter:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"}
        })
</script>
</body>

可以显示图片

<body>
<div id="app">
    <img v-bind:src="counter">
</div>
<script>
var vm=new Vue({
		el:"#app",
		data:{counter:"https://img1.baidu.com/it/u=282903700,3028230046&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"}
        })
</script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^