vue.js定义的文本jquery怎么获取

JavaScript012

vue.js定义的文本jquery怎么获取,第1张

vue.js定义的文本jquery获取办法:

1、定义html代码如下:

<div id="demo">

 <p>{{message}}</p>

 <input v-model="message">

</div>

2、利用vue.js定义变量文本

var demo = new Vue({

 el: '#demo',

 data: {

   message: 'Hello Vue.js!'

 }

})

3、运行结果:

最简单的方法就是用元素的innerHTML属性赋值,如:myNewElement.innerHTML = “我是文本”但这样不能清晰的体现DOM中新增加了一个文本节点。

然后另一种添加文本节点的方式,可分为两步:

1、创建节点:文本节点的创建使用createTextNode方法,如:var myText = document.createTextNode(“我是文本”)

2、将创建的节点用appendChild方法添加某个元素下。如:myNewElement.appendChild(myText)这样myNewElement就有myText的文本节点,文本节点的内容是“我是文本”即可。

获取属性节点

第一种方法:获取官方定义的属性节点(获取元素的对应属性值)。

格式:元素节点,属性名。

注意:不能获取自定义属性的值。

代码如下:

console.log(jsInput.placeholder)

alert("是时候展现真正的技术")

设置属性节点的值

公式:元素节点 . 属性名 = 新的属性值

代码如下:

//设置元素对应属性的值

//元素节点.属性名 = 新的属性值

jsInput.placeholder = "sunck good"

第二种方法

公式:元素节点 . getAttribute(属性名)

注意:还可以获取自定义属性的值。

代码:

console.log(jsInput.getAttribute("my"))

设置自定属性的值

公式:元素节点 . setAttribute(属性名, 新属性值)

注意:当属性不存在时,变为添加属性

代码:

//设置

//元素节点.setAttribute(属性名, 新属性值)

jsInput.setAttribute("my", "sunck")

//注意:当属性不存在时,变为添加属性

jsInput.setAttribute("other", "sunck")

删除属性节点

公式:元素节点.removeAttribute(属性名)

注意:某些低版本浏览器不支持

代码:

jsInput.removeAttribute("other")

console.log(jsInput)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>MyHtml.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html charset=UTF-8">

<script>

function addtextarea(x){

 if(x==""){

  count=0

 }else{

  count=x

 }

 var inputs = document.getElementById("inputs")

    while(inputs.hasChildNodes()) //每次动态添加应该更新内容,当div下还存在子节点时 循环继续

     {

     inputs.removeChild(inputs.firstChild)

     }

 for (var i=0i<counti++){ 

  var username = document.createElement("input")

  username.type="text"

  username.name="name_"+i

  username.id=i//给这个input赋予id值     

  username.value="动态创建"+i

  inputs.appendChild(username)

  inputs.appendChild(document.createElement("br"))

  //提交信息直接用表单提交,本来内容就是循环在Form里的,你应该懂吧

  }   

 }

</script>

  </head>

  <body>

  动态添加数(输数字):<input type="text" id="js_add_num" name="js_add_num" size="4" onkeyup="addtextarea(this.value)" />

  <form id="inputs" action="像服务端发的请求" method="post">

  </form>

  </body>

</html>

老哥,直接复制过去运行看看是不是你要的效果。嘿嘿